Компонент является частью объявлений 2 модулей в Angular

Question

Я создал компонент с именем commonmod.component.ts , который я включил в два других модуля (abc и 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, я получаю следующееошибка.

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: Тип commonmod является частью объявлений 2 модулей: abcand def!Пожалуйста, рассмотрите возможность перемещения Commonmod в модуль более высокого уровня, который импортирует abc и def.Вы также можете создать новый NgModule, который экспортирует и включает в себя общий способ импорта, который NgModule в abcand def.Ошибка: Тип commonmod является частью объявлений 2 модулей: abc и def!Пожалуйста, рассмотрите возможность перемещения общего модуля в модуль более высокого уровня, который импортирует abcand def.Вы также можете создать новый NgModule, который экспортирует и включает в себя commonmod, а затем импортирует этот NgModule в abc и def.

Answer 1

Компонент может быть объявлен в одном и только одном модуле.Если вы попытаетесь объявить его более чем в одном модуле, вы получите эту ошибку

Ошибка: Тип ... является частью объявлений 2 (или более) модулей:

Решение этой проблемы довольно простое.Если вам нужно использовать компонент в нескольких модулях, добавьте его в массив exports того модуля, который объявил .

Допустим, у нас есть компонент с именем GreetingsComponent , который объявлен в модуле TestModule , и я хочу использовать его в AppComponent , то естьобъявлено в AppModule .Я просто добавлю его в массив exports TestModule вот так

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

Теперь, когда AppModule имеет импортированных TestModule и таким образом все конструкции, которые должны Компоненты, Директивы, Трубы и т. Д. , которые находятся в массиве экспорта TestModule , должныбыть автоматически доступным для AppModule.

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 { }

Теперь вы можете просто использовать GreetingsComponent в AppComponent

  <greetings></greetings>

Работающий StackBlitz здесь.

ура.

Answer 2

Сообщение довольно ясно: вы не можете объявить компонент более чем в 1 модуле.Если оба модуля нуждаются в этом, вам нужно объявить / экспортировать свой компонент в третий модуль и импортировать его в abc & def.

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

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

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