I have an AppModule, in which i lazy load MainModule and which lazy loads HomeModule.

MainModule is loads fine, but HomeModule is loaded, but not rendered inside router-outlet. If i load it without lazy loading, it works.

How can i make lazy loaded HomeModule render?

I've created a Stackblitz https://stackblitz.com/edit/angular-ivy-x1gcfr?file=src/app/app.module.ts

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

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

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./main/main.module').then(m => m.MainModule),
  },
];

@NgModule({
  imports:      [ BrowserModule, RouterModule.forRoot(routes) ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent { }

main.module.ts

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

import { MainComponent } from './main.component';
// import { HomeComponent } from '../home/home.component';

const routes: Routes = [
  {
    path: '',
    component: MainComponent,
    children: [
      {
        path: '',
        loadChildren: () => import('../home/home.module').then(m => m.HomeModule), // Loaded but not rendered
        // component: HomeComponent, // It works
      },
    ],
  },
];

@NgModule({
  declarations: [MainComponent],
  imports: [CommonModule, RouterModule.forChild(routes)],
})
export class MainModule {}

main.component.ts

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

@Component({
  template: `Header <router-outlet></router-outlet> Footer`
})
export class MainComponent { }

home.module.ts

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

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    CommonModule
  ]
})
export class HomeModule { }

home.component.ts

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

@Component({
  template: `<p>Home component works!!!</p>`
})
export class HomeComponent { }

CodePudding user response：

Lazy loaded HomeModule wants to know how to route to the HomeComponent....

HomeModule.ts add:

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

FYI: It's better practice to keep your router in a different file e.g. home.router.ts

CodePudding user response：

When you lazy-load Angular modules, those modules have to provide routing. If you don't include it, how should Angular determine the component to load? In your case, the HomeModuleis loaded, but which component of this module should be rendered? Sure, in your case there is only one, but in real applications you will often have multiple components in a module.

To fix your issue, you simply include routing into your HomeModule (just like you did in your MainModule):

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

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

I edited your Stackblitz accordingly, see here. You can also find more info on that in the Angular documentation on lazy-loading modules