typescript 组件是 Angular 中 2 个模块声明的一部分

Component is part of the declarations of 2 modules in Angular

提问by Chris

I have created a component called commonmod.component.tsthat I am including in two other modules (abc and def).

我创建了一个名为commonmod.component.ts的组件，我将其包含在其他两个模块（abc 和 def）中。

abc.module.ts

abc.module.ts

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

def.module.ts

def.module.ts

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

When I redirect one page in abc module to another page in def module, it is throwing me following error.

当我将 abc 模块中的一个页面重定向到 def 模块中的另一个页面时，它会引发以下错误。

ERROR Error: Uncaught (in promise): Error: Type commonmod is part of the declarations of 2 modules: abcand def! Please consider moving commonmod to a higher module that imports abc and def. You can also create a new NgModule that exports and includes commonmodthen import that NgModule in abcand def. Error: Type commonmod is part of the declarations of 2 modules: abc and def! Please consider moving commonmodto a higher module that imports abcand def. You can also create a new NgModule that exports and includes commonmod then import that NgModule in abc and def.

错误错误：未捕获（承诺）：错误：类型 commonmod 是 2 个模块声明的一部分：abcand def! 请考虑将 commonmod 移至更高的导入 abc 和 def 的模块。您还可以创建一个新的 NgModule，该 NgModule 导出并包含 commonmod 然后在 abcand def 中导入该 NgModule。错误：类型 commonmod 是 2 个模块声明的一部分：abc 和 def！请考虑将 commonmod 移动到一个更高的模块，导入 abcand def。您还可以创建一个新的 NgModule，该 NgModule 导出并包含 commonmod，然后在 abc 和 def 中导入该 NgModule。

回答by Obaid

A component can be declared in one and only one module. If you try to declare it in more than one modules you'll get this error

一个组件只能在一个模块中声明。如果您尝试在多个模块中声明它，您将收到此错误

Error: Type ... is part of the declarations of 2 (or more) modules:

错误：类型 ... 是 2 个（或更多）模块声明的一部分：

The solution to this problem is pretty simple. If you need to use a component in more than one modules then add it to the exportsarray of the module that declaredit.

这个问题的解决方案非常简单。如果您需要在多个模块中使用一个组件，请将其添加到声明它的模块的exports数组中。

So lets say we have a component named GreetingsComponentthats is declared in a module TestModuleand I want to use it in AppComponentthat is declared in AppModule. I'll simply add it in the exportsarray of the TestModulelike this

因此，假设我们有一个名为GreetingsComponent的组件，它在模块TestModule 中声明，我想在AppModule中声明的AppComponent 中使用它。我会像这样简单地将它添加到TestModule的导出数组中

import {NgModule} from '@angular/core';
import {GreetingComponent} from './greeting.component';
@NgModule({
declarations:[GreetingComponent],
exports:[GreetingComponent]
})
export class TestModule
{
}

Now as AppModulehas importedTestModuleand this way all constructs whether Components, Directive, Pipes etcthat are in the exports arrayof the TestModuleshall be automatically available to the AppModule.

现在，由于AppModule已经导入了TestModule，并且通过这种方式，所有组件、指令、管道等都在TestModule的导出数组中是否应自动可用于 AppModule。

AppModule.ts

AppModule.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {TestModule} from './test.module';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule, FormsModule, TestModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Now you can simply use GreetingsComponent in the AppComponent

现在您可以简单地在 AppComponent 中使用 GreetingsComponent

  <greetings></greetings>

A working StackBlitzhere.

一个有效的StackBlitz在这里。

Cheers.

干杯。

回答by Gér?me Grignon

You can't declare a component in more than 1 module. If both modules need it, you need to declare/export your component in a third module and imports this one in abc & def.

您不能在 1 个以上的模块中声明一个组件。如果两个模块都需要它，您需要在第三个模块中声明/导出您的组件，并在 abc 和 def 中导入这个组件。

@NgModule({
  imports:      [ MainModule ]
})
export class AbcModule { }

@NgModule({
  imports:      [ MainModule ]
})
export class DefModule { }

@NgModule({
  declarations: [ CommonMod ],
  exports:    [ CommonMod ]
})
export class MainModule { }