Question

我正在使用

角

我正在尝试做什么

我有一个我想在多个模块中重用的加载组件

我做了什么

我创建了一个名为“loading-overlay”的新模块
在此模块中，我导出叠加组件
我将此模块添加到app.module
将组件添加到多个模块时，我收到以下错误：

类型LoadingOverlayComponent是2个模块声明的一部分：LoadingOverlayModule和ProjectsModule！请考虑将LoadingOverlayComponent移动到导入LoadingOverlayModule和ProjectsModule的更高模块。您还可以创建一个新的NgModule导出并包含LoadingOverlayComponent，然后在LoadingOverlayModule和ProjectsModule中导入该NgModule。

我尝试将其从app.module中删除，并将其导入到我需要的其他模块中而没有太多运气。我一定错过了一些显而易见的事。

叠加模块

// Modules
import { NgModule } from '@angular/core';

// Components
import { LoadingOverlayComponent } from './loading-overlay.component';



@NgModule({
  declarations: [
    LoadingOverlayComponent,
  ],

  imports: [

  ],

  exports: [
    LoadingOverlayComponent
  ],

  providers: [ ],

})

export class LoadingOverlayModule { }

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Routing
import { AppRouting } from './routing/app-routing';

// Modules
import { ProjectsModule } from './projects/projects.module';
import { UserModule } from './user/user.module';
import { LoadingOverlayModule } from './loading-overlay/loading-overlay.module';


// Services / Providers
import { AuthService } from './user/auth.service'





@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRouting,
    LoadingOverlayModule  
  ],
  providers: [
    AuthService,

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

项目模块

// Modules
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LoadingOverlayModule } from '../loading-overlay/loading-overlay.module';

import { LoadingOverlayComponent } from '../loading-overlay/loading-overlay.component';






@NgModule({
  declarations: [

    LoadingOverlayComponent
  ],

  imports: [
    CommonModule,
    RouterModule,

    LoadingOverlayModule
  ],

  providers: [ ],

})

export class ProjectsModule { }

任何帮助指出我愚蠢错过的内容都将非常感激：）

Answer 1

删除：

来自LoadingOverlayModule

的

AppModule 来自LoadingOverlayComponent

的

ProjectsModule

并且：

import LoadingOverlayModule需要的地方

Answer 2

LoadingOverlayModule 是共享模块。它有自己的组件。现在要使用它的组件，您需要将 LoadingOverlayModule 导入到Project模块中。从项目模块的声明中删除 LoadingOverlayComponent 。

项目模块声明需要另一个组件（例如 ProjectComponent ）。当共享模块导入到项目模块中时，您可以使用选择器直接在 ProjectComponent 模板中使用overlay组件。希望这会有所帮助。

Angular - 跨多个模块使用组件

2 个答案: