"コンポーネントは既知の要素ではありません" - コンポーネントを親モジュールに移動した後

Question

コンポーネントを再利用するために、モジュールからその親にコンポーネントを移動しようとしています（複数の子モジュールはそれを使用するはずです）。

もともと、子供モジュールは次のコードを内部に持っていた（私はMyDesiredComponentを移動したい）：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { Routes, RouterModule } from '@angular/router'; 
import { FormsModule } from '@angular/forms'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { ClickOutsideModule } from 'ng-click-outside'; 

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 

import { ChildComponent } from './child.component'; 
import { MyDesiredComponent } from '../common/timeline/timeline.component'; 

export const routes: Routes = [ 
    { path: 'child', component: ChildComponent }, 
]; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    NgbModule, 
    RouterModule.forChild(routes), 
    FormsModule, 
    BrowserAnimationsModule, 
    ClickOutsideModule, 
    ], 
    declarations: [ 
    ChildComponent, 
    MyDesiredComponent 
    ] 

}) 

export class ChildModule { } 

私は親モジュールに宣言を移動し、次のように：

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

import { ChildModule } from './child/child.module'; 
import { DesiredComponent } from './common/desired/desired.component'; 

@NgModule({ 
    imports: [ 
    ChildModule 
    ], 
    declarations: [DesiredComponent], 
    exports: [DesiredComponent] 
}) 
export class ParentModule { } 

移動した後コンポーネント、アプリケーションが読み込まれず、次のエラーが表示されます：'desired-component' is not a known element。

私はここで何が欠けていますか？

Answer 1

これは「遅延ロード」の共有モジュール内のコンポーネント、およびインポートすることによる達成するための最良の方法というあなたのapp.module.ts内部

shared.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { RouterModule } from '@angular/router'; 

import { DesiredComponent } from ''; 

@NgModule({ 
    imports: [CommonModule, RouterModule], 
    declarations: [DesiredComponent, LoadingComponent], 
    exports: [DesiredComponent, 
    CommonModule, FormsModule, RouterModule] 
}) 
export class SharedModule { 
    static forRoot(): ModuleWithProviders { 
    return { 
     ngModule: SharedModule, 
     providers: [] 
    }; 
    } 
} 

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { SharedModule } from ''; 
import { AppComponent } from ''; 

@NgModule({ 
    imports: [BrowserModule, SharedModule.forRoot()], 
    declarations: [AppComponent], 
    providers: [], 
    bootstrap: [AppComponent] 

}) 
export class AppModule { }