组件由多个 NgModule 声明答案

【问题标题】：The component is declared by more than one NgModule组件由多个 NgModule 声明
【发布时间】：2021-08-08 14:52:27
【问题描述】：

所以我创建了一个组件 ExampleComponent 并在 app.module 中列出的 isnt 模块中声明它。接下来，我想在 app.module 中列出的模块中声明组件 ExampleComponent。我该怎么做呢？如果我简单地声明它，我会得到以下错误：组件 ExampleComponent 由多个 NgModule 声明。

abc.module.ts

import { ExampleComponent} from '../Example/Example.component';
@NgModule({
  declarations: [
    ExampleComponent
  ]
})

app.module.ts

import { NewModule} from '../new/new.component';
@NgModule({
  imports: [
    NewModule
  declarations: [
    
  ]
})

新模块

import { ExampleComponent} from '../Example/Example.component';
    @NgModule({
      declarations: [
        ExampleComponent
      ]
    })

【问题讨论】：

如果它在其他模块中，则将其放入imports:[...here...]

标签： angular typescript

【解决方案1】：

如果您在多个模块中使用您的组件，则意味着该组件是共享的。您需要为您的ExampleComponent 创建一个专属模块 (ExampleModule)，然后将该模块导入您要使用的任何位置ExampleComponent。

所以创建 ExampleModule：

import { NgModule } from '@angular/core';
import { ExampleComponent} from '../Example/Example.component';
@NgModule({
  declarations: [
    ExampleComponent,
  ],
  exports: [
    ExampleComponent,
  ]
})
export class ExampleModule { }

然后像这样将它导入到您要使用ExampleComponent 的位置（导入abc module 和app module）：

import { ExampleModule } from '../example.module';
@NgModule({
  imports: [
    ExampleModule 
  ]
  ...
})

通过为共享组件定义单独的模块，您提供了一些封装层，您可以在其中描述和提供组件工作所需的所有依赖项，因此，将来所有消费者只需要导入模块本身无需了解所有这些依赖项的任何信息。

【讨论】：

就我而言，在ExampleNodule 中，除此之外我还需要导入通用模块才能使我的组件正常工作：import { CommonModule } from '@angular/common';imports: [CommonModule, ExampleModule]

【解决方案2】：

如果在 app.module.ts 文件而不是模块文件中导入组件，则会出现此错误。

案例研究：

我的文件夹结构如下：

app 
   src 
     component 
        general.component.ts 
        general.component.html 
        general.component.scss 
        general.component.spect 
        general.module.ts
        general.model.ts 
        general.services.ts
app.module.ts
app.routing.ts

“组件被多个 NgModule 声明”的错误会出现在

在 app.module.ts 文件中，如果您已按以下方式导入；

import { GeneralComponent } from './component/general/graph.component';

@NgModule({
          declarations: [
           GeneralComponent
          ],
    })

解决问题的更改

将general.module.ts里面的general.component导出如下：

general.module.ts

    import { NgModule } from '@angular/core'
    import { CommonModule } from '@angular/common'
    import { GeneralComponent } from './general.component'    
    @NgModule({
      declarations: [GeneralModule.rootComponent],
      imports: [CommonModule],
      exports: [GeneralModule.rootComponent],
      entryComponents: [GeneralModule.rootComponent],
    })
    export class GeneralModule {
      static rootComponent = GeneralComponent
    }

在 app.module.ts 中导入 general.module.ts

app.module.ts

 import { GeneralModule } from './component/graph-general/graph-general.module';
    @NgModule({
      declarations: [
      ],
      imports: [  
         GeneralModule ,
    ]
    }) 
    export class AppModule { 
}

注意：始终只有组件应该在声明中，所有模块都应该在导入中。

【讨论】：