Podziel Komponent między 2 moduls

Question

Próbuję zawierać do Component w 2 moduły (rodzice i dzieci), ale coraz różne błędy w procesie

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> 

mam ładowania ChildModule w Async sprawa

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

Kiedy nie importing lub declaring w ChildModule dostaję błąd:

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

****** UPDATE *******

Tworząc FeatureModule, aby działać tak SharedModule powinna eksportować składniki ... Kod updateed ...

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

Answer 1

aktualizacji

imports jest tylko dla modułów, a nie elementów. Wątpię, że zadziała, jeśli app.module wyeksportuje komponent współdzielony. Zamiast tego zmień go na SharedModule lub MyFeatureModule i dodaj ten moduł do imports, w którym chcesz użyć elementów, które moduł eksportuje.

oryginalny

Jeden składnik może być dodana tylko declarations z dokładnie jednym @NgModule()

Jako obejście utworzyć nowy moduł dla komponentu i dodać nowy moduł do imports: [...] pozostałych dwóch modułów (gdzie chcesz go użyć).

Zobacz także https://github.com/angular/angular/issues/11481#issuecomment-246186173

When you make a component part of a module you impart on it a set of rules when it is compiled. Having a component without belonging to a NgModule is meaningless as the compiler can't compile it. Having a component be part of more then one module is also weird as you are saying that depending which module you chose the rules for compiling are different. And when you dynamically load such a component it would be ambiguous which set of compilation rules you wanted.

The idea of removing that each component belongs to exactly one module is a no-go for the reasons stated above.

Answer 2

Dla kompletności Według Gunter odpowiedź ... używać SharedModule

**SharedModule** 

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

export class SharedModule {} 

app.module.ts

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

dziecko. moduł. ts

@NgModule({ 
    imports: [SharedModule] 
}) 

Answer 3

Musisz zawierać wspólny składnik w swoich dostawców: Zakład SharedModule. Następnie z modułu pochodnego wystarczy zaimportować SharedModule i Bingo.

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

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

    export class SharedModule {} 

I w module pochodzi,

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

Answer 4

Można również wyeksportować komponent więcej niż raz i deklarują na przykład MyComponentA w jednym module i MyComponentB w innym module.

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

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

export class MyComponentA extends MyComponent {} 
export class MyComponentB extends MyComponent {} 

Answer 5

Utwórz moduł współdzielony. Zadeklaruj i wyeksportuj 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 { } 

importu SharedModule w AppModule i innych modułów.

app.module.ts

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