根据官方 Angular 教程，延迟模块 Angular 8 不起作用

Question

I'm following exactly this tuto from the official documentation :

https://angular.io/guide/lazy-loading-ngmodules

that allow us to create lazy loaded modules in Angular 8

I have an error that i can't figure out and i don't find any similar issue on internet..

I have this error :

ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 'undefined'.
Error: No NgModule metadata found for 'undefined'.
    at NgModuleResolver.resolve (compiler.js:20665)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:19794)
    at JitCompiler._loadModules (compiler.js:25582)
    at JitCompiler._compileModuleAndComponents (compiler.js:25565)
    at JitCompiler.compileModuleAsync (compiler.js:25527)
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:216)
    at MergeMapSubscriber.project (router.js:5391)
    at MergeMapSubscriber._tryNext (mergeMap.js:46)
    at MergeMapSubscriber._next (mergeMap.js:36)
    at MergeMapSubscriber.next (Subscriber.js:49)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

This error appears in the browser console on the button click.

If you have already faced this issue, please help me... I'm stuck...

UPDATE :

In app-routing.module.ts

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


const routes: Routes = [
  {
    path: 'astreintes',
    loadChildren : () => import('./astreintes/astreintes.module').then(module => {module.AstreintesModule})
  },
  {
    path: 'profile',
    loadChildren : () => import('./profile/profile.module').then(module => {module.ProfileModule})
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

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

In profile-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserProfileComponent } from './user-profile/user-profile.component';


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

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

In astreinte-routing.module.ts ( Astreinte is a french word ):

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AstreintesListComponent } from './astreintes-list/astreintes-list.component';


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

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

My components only show

<p>profile works!</p>

and

<p>astreintes-list works!</p>

Answer 1

Your lambda functions return nothing. Either remove the brackets or add return statements.

Either:

loadChildren : () => import('./profile/profile.module').then(module => {return module.ProfileModule})

or:

loadChildren : () => import('./profile/profile.module').then(module => module.ProfileModule)