组件是Angular中2个模块的声明的一部分 [英] Component is part of the declarations of 2 modules in Angular

问题描述

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

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

abc.module.ts

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

def.module.ts

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

当我将abc模块中的一页重定向到def模块中的另一页时，它使我产生以下错误.

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

错误错误:未被捕获(承诺):错误:类型commonmod是2个模块的声明的一部分:abcand def！请考虑将commonmod移至导入abc和def的更高模块.您还可以创建一个新的NgModule，以导出并包括commonmod，然后在abcand def中导入该NgModule. 错误:类型commonmod是2个模块的声明的一部分:abc和def！请考虑将commonmod移至导入abcand def的更高模块.您还可以创建一个新的NgModule，将其导出并包括commonmod，然后在abc和def中导入该NgModule.

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.

推荐答案

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

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

错误:类型...是2个(或更多)模块的声明的一部分:

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

解决此问题的方法非常简单.如果您需要在多个模块中使用某个组件，请将其添加到声明的模块的导出数组中.

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 exports array of the module that declared it.

所以可以说我们有一个名为 GreetingsComponent 的组件，该组件在模块 TestModule 中声明，我想在 AppComponent 中使用它在 AppModule 中声明.我将像这样将其添加到 TestModule 的 exports 数组中

So lets say we have a component named GreetingsComponent thats is declared in a module TestModule and I want to use it in AppComponent that is declared in AppModule. I'll simply add it in the exports array of the TestModule like this

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

现在，作为 AppModule 已导入 TestModule ，这样，所有构造 Components，Directive，Pipes等 TestModule 的 exports数组中的内容将自动提供给AppModule.

Now as AppModule has imported TestModule and this way all constructs whether Components, Directive, Pipes etc that are in the exports array of the TestModule shall be automatically available to the 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 { }

现在，您只需在AppComponent中使用GreetingsComponent

Now you can simply use GreetingsComponent in the AppComponent

  <greetings></greetings>

在这里工作的 StackBlitz .

干杯.

这篇关于组件是Angular中2个模块的声明的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！