Getting a 'Component not part of Ngmodule' while it shouldn't be called in he current module

Question

so I am getting a problem on a new Angular app.

Based on Tour of Heroes, I created an app, with an 'AboutComponent', which is part of appModule. Added on the routes, and it workds fine.

Besides, I created a new Module. This module is also routedwith lazy load. But when I click on the nav to get to the new modules, I got an error saying : 'AboutComponent is not part of any Ngmodule or the module has not been loaded'.

I checked, and found no code that invoke AboutComponent when loading the new module. As I don't need it in my new module.

Here is the code :

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

My module

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

I think, I am missing a little thing, as I am new with angular, but can't see it.

I also can provides you my github project if you need to, and my code provided is not enough (I don't know yet, all connections between my files soI maybe forgot some useful things for you).

Here is the git hub project : https://github.com/kme-rennes/dev-site-as-with-angular

Answer 1

As y_vyshnevska said in the comment (saw it about at the same time), you export the AppRoutingModule in the SharedModule. This means that all your modules importing the SharedModule will also import all the modules from the AppRoutingModule, which is expecting an AboutComponent, while there is none in your lazy-loaded ArticleModule.

Here is the final SharedModule :

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