Поделиться компонентом между 2 модулями

Я пытаюсь включить Component в 2 модуля (родительский и дочерний), но получая различные ошибки в процессе

app.module.ts

@NgModule({
    declarations: [SharedComponent],
    exports: [SharedComponent]...
})

child.module.ts

@NgModule({
    imports: [SharedComponent], //Unexpected directive imported by module
})

app.html

<div class="container">
    <shared-selector></shared-selector>
    <child-selector></child-selector>
</div>

child.html

<div>
    content
    <shared-selector></shared-selector>
</div>

Я загружаю ChildModule в вопрос Async

loadChildren: 'app/child.module#ChildModule',

Если не importing или declaring в ChildModule, я получаю сообщение об ошибке:

template parse error: shared-selector is not a known element

****** ОБНОВЛЕНИЕ *******

при создании FeatureModule, чтобы работать с SharedModule, необходимо экспортировать обновленный код Components...

SharedModule

@NgModule({
    imports: [
        CommonModule
     ],
    declarations: [
         SharedComponent
    ],
    exports: [
        SharedComponent
    ]
})

export class SharedModule {}

app.module.ts

@NgModule({
    imports: [ChildModule, SharedModule],...
})

child.module.ts

@NgModule({
    imports: [SharedModule], //Unexpected directive imported by module
})

Ответы

Ответ 1

Обновление

imports предназначен только для модулей, а не для компонентов. Я сомневаюсь, что это сработает, если app.module экспортирует общий компонент. Сделайте вместо этого SharedModule или MyFeatureModule и добавьте этот модуль в imports, где вы хотите использовать элементы, экспортируемые модулем.

оригинальный

Один компонент может быть добавлен только declarations ровно один @NgModule()

В качестве обходного пути создайте новый модуль для компонента и добавьте новый модуль в imports: [...] из двух других модулей (где вы хотите его использовать).

См. также https://github.com/angular/angular/issues/11481#issuecomment-246186173

Когда вы создаете компонентную часть модуля, вы передаете ему набор правил при компиляции. Наличие компонента, не принадлежащего к NgModule, не имеет смысла, поскольку компилятор не может его скомпилировать. Поскольку компонент является частью более одного модуля, также странно, поскольку вы говорите, что в зависимости от того, какой модуль вы выбрали, правила компиляции различны. И когда вы динамически загружаете такой компонент, было бы неоднозначно, какой набор правил компиляции вы хотели.

Идея удалить, что каждый компонент принадлежит ровно одному модулю, не имеет значения по причинам, указанным выше.

Ответ 2

Для полноты, согласно ответу Гюнтера, используйте SharedModule:

SharedModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
    imports: [
        CommonModule
     ],
    declarations: [
        SharedComponent
    ],
    exports: [
        SharedComponent
    ]
})
export class SharedModule {}

app.module.ts

@NgModule({
    imports: [ChildModule, SharedModule],...
})

child.module.ts

@NgModule({
    imports: [SharedModule]
})

Ответ 3

Создайте SharedModule. Объявлять и экспортировать SharedComponent.

shared.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedComponent } from './shared';

 @NgModule({
   declarations: [
     SharedComponent
   ],
   imports: [
     CommonModule
   ],
   exports: [
     SharedComponent
   ],
   providers: [

   ]
 })
 export class SharedModule { }

Импортировать SharedModule в AppModule и любые другие модули.

app.module.ts

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

Ответ 4

Вы должны включить общий компонент в своих поставщиков: раздел SharedModule. Затем из производного модуля вы просто импортируете SharedModule и Bingo.

    import { PagingInfoComponent } from './paging/paging.component';

   @NgModule({
      providers: [ PagingInfoComponent ],
      declarations: [ ],
      exports: [ ]
    })

   export class SharedModule {}

И в вашем производном модуле

import { SharedModule } from '../location/to/shared.module';
@NgModule({
 imports: [SharedModule ]
});

Ответ 5

Вы также можете экспортировать свой компонент более одного раза и объявить, например, A_MyComponent в одном модуле и B_MyComponent в другом модуле.

import { Component } from '@angular/core';

@Component({
    selector: 'app-my-component',
    templateUrl: './my.component.html'
})
class MyComponent  {
    constructor() {}
}

export class A_MyComponent extends MyComponent {}
export class B_MyComponent extends MyComponent {}