'Ngmoduleの一部ではないコンポーネント'を現在のモジュールで呼び出さないでください

Question

新しいAngularアプリケーションで問題が発生しています。

Tour of Heroesに基づいて、appModuleの一部である 'AboutComponent'を使ってアプリを作成しました。ルートに追加され、それはうまく動作します。

さらに、新しいモジュールを作成しました。このモジュールは遅延負荷でルーティングされます。しかし、新しいモジュールを取得するためにnavをクリックすると、次のようなエラーが表示されます。 'AboutComponentはNgmoduleの一部ではないか、モジュールがロードされていません'。

新しいモジュールを読み込むときにAboutComponentを呼び出すコードはありませんでした。私は新しいモジュールでそれを必要としないので。

のApp

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

import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 

import { AboutComponent } from './about.component'; 
import { WelcomeComponent } from './welcome.component'; 
import { BannerComponent } from './banner.component'; 

import { CoreModule} from './core/core.module'; 

@NgModule({ 
    declarations: [ 
    AppComponent, AboutComponent, BannerComponent, WelcomeComponent 
    ], 
    imports: [ 
    BrowserModule, 
    AppRoutingModule, 
    CoreModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 


<!--The content below is only a placeholder and can be replaced.--> 
<div style="text-align:center"> 
    <h1> 
    Welcome to {{title}}! 
    </h1> 

</div> 
<nav> 
    <a routerLink="/about">About</a> 
    <a routerLink="/articles">Articles</a> 
</nav> 

<router-outlet></router-outlet> 

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 


import { AboutComponent } from './about.component'; 

const routes: Routes = [ 

    { path: 'about', component: AboutComponent }, 
    { path: 'articles', loadChildren: 'app/article/article.module#ArticleModule'} 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { } 

私は私のように、小さなことをしないのです、と思うAboutComponent

import { Component } from '@angular/core'; 
@Component({ 
    template: ` 
    <h2 highlight="skyblue">About</h2> 
    <twain-quote></twain-quote> 
    <p>All about this sample</p>` 
}) 
export class AboutComponent { } 

マイモジュール

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

import { ArticleRoutingModule } from './article-routing.module'; 
import {SharedModule} from '../shared/shared.module'; 
import { ListeArticleComponent } from './liste-article/liste-article.component'; 
import { DetailArticleComponent } from './detail-article/detail-article.component'; 

@NgModule({ 
    imports: [ 
    ArticleRoutingModule, SharedModule 
    ], 
    declarations: [ListeArticleComponent, DetailArticleComponent] 
}) 
export class ArticleModule { } 

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { ListeArticleComponent} from './liste-article/liste-article.component'; 
import { DetailArticleComponent} from './detail-article/detail-article.component'; 

const routes: Routes = [{ path: '', component: ListeArticleComponent }, 
         { path: ':id', component: DetailArticleComponent }]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 
export class ArticleRoutingModule { } 

：ここ

はコードがあります角張った新しいそれを見ることはできません。

私のgithubプロジェクトは必要に応じて提供することができますが、私のコードでは十分ではありません（まだわかりません。私のファイル間のすべての接続がわかりません。ここで

はgitのハブプロジェクトです：https://github.com/kme-rennes/dev-site-as-with-angular

Answer 1

y_vyshnevskaが（同時にについてそれを見て）コメントで言ったように、あなたはSharedModuleでAppRoutingModuleをエクスポートします。これは、SharedModuleをインポートするすべてのモジュールがAboutComponentを期待しているAppRoutingModuleからすべてのモジュールをインポートすることを意味しますが、遅延ロードされたArticleModuleにはモジュールはありません。ここで

は最終SharedModuleです：

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule 
    ], 
    exports: [ 
    CommonModule, 
    FormsModule, 
    // AppRoutingModule, 
    HighlightDirective, 
    TitleCasePipe 
    ], 
    declarations: [ 
    HighlightDirective, 
    TitleCasePipe 
    ] 
}) 
export class SharedModule { }