Angular 5 lazy-loading not displaying some modules

Question

I am trying to get lazy loading to work on my angular 5 app however my simple test does not seem to be working.

"devDependencies": {
    "@angular/cli": "^1.7.4", 
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",

(Using cli 1.7.4 - based on Lazy load Angular 5 error: $$_lazy_route_resource lazy recursive )

The issue is that ONLY some (but not all) of my routes actually produce the "template" result. I've added a console.log to the constructor, and there is 100% correlation to the template NOT showing and the console NOT logging.

I started with a bunch of components in a public folder, and a single 'public.module'; but having all the routing in one public.module didn't give me the lazy-loading I wanted. So I moved each component into its own dir, with its own module that handles its child routing.

And that's when this behavior started - random "no render".

Of the 12 components I have - 2 render their template to the screen the rest do not. I've reduced the code down to two modules - the rest are identical, I'm trying to get it to work bare bones before I load up with anything module specific.

Any help is greatly appreciated.

APP STRUCTURE:

app
|- components
|---|- public
|---|---|- home
|---|---|---|- home.component.ts (this displays "home works", and console.logs)
|---|---|---|- home.module.ts
|---|---|- about
|---|---|---|- about.component.ts (this DOES NOT work, and displays nothing)
|---|---|---|- about.module.ts
|- app.module.ts
|- app.component.ts
|- app.routing.module.ts
|- app.component.html

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';

@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule,
        RouterModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
    ],
    bootstrap: [
        AppComponent
    ]
})

export class AppModule { }

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent {}

app.routing.module.ts

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

const appRoutes: Routes = [
    { path: '', loadChildren: './components/public/home/home.module#HomeModule' },
    { path: 'about', loadChildren: './components/public/about/about.module#AboutModule' }
];

@NgModule({
    imports: [
        RouterModule.forRoot( appRoutes )
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoutingModule {}

app.component.html

<button routerLink="/">home</button><br>
<button routerLink="/about">about</button><br>
<router-outlet></router-outlet>

components/public/home/home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

const routes: Routes = [
    { path: '', component: HomeComponent }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(routes)
    ],
    declarations: [
        HomeComponent
    ]
})

export class HomeModule { }

components/public/home/home.component.ts

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

@Component({
    selector: 'app-home',
    template: `<h1>Home Works</h1>`
})

export class HomeComponent implements OnInit {

    constructor() { console.log('Home Works'); }

    ngOnInit() { }

}

components/public/about/about.module.ts

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

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

const routes: Routes = [
    { path: 'about', component: AboutComponent }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(routes)
    ],
    declarations: [
        AboutComponent
    ]
})

export class AboutModule { }

components/public/about/about.component.ts

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

@Component({
    selector: 'app-about',
    template: `<h1>About Works</h1>`
})

export class AboutComponent implements OnInit {

    constructor() { console.log('About Works'); }

    ngOnInit() { }

}

Answer 1

Your about component doesn't load because its route isn't being hit. In your about.module you have:

const routes: Routes = [
    { path: 'about', component: AboutComponent }
];

Which is a child route of:

const appRoutes: Routes = [
    { path: '', loadChildren: './components/public/home/home.module#HomeModule' },
    { path: 'about', loadChildren: './components/public/about/about.module#AboutModule' }
];

Which means, to load your AboutComponent you have to go to the route /about/about.

The fix:

const routes: Routes = [
    { path: '', component: AboutComponent }
];

Answer 2

You can try with this solution.

I have create a demo on Stackblitz

add in about.component.ts

{ path: '', component: AboutComponent }

Answer 3

DEMO

app-routing.module.ts:

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

import { AboutModule } from './about/about.module'
import { HomeModule } from './home/home.module'

const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => HomeModule, },
  { path: 'about', loadChildren: () => AboutModule },
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class AppRoutingModule { }

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module'

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports: [BrowserModule, FormsModule, AppRoutingModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

home.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    HomeComponent
  ]
})

export class HomeModule { }

about.module.ts:

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

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

const routes: Routes = [
  { path: '', component: AboutComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    AboutComponent
  ]
})

export class AboutModule { }