Lazy routing do not work in Angular 20, it came into ERROR RuntimeError: NG04002

I am developing an Angular application, and the version did not work as I wish. I've got multiple modules in this app and I used the lazy routing. But when I tried to navigate to sub module's route, but it failed with ERROR RuntimeError: NG04002: Cannot match any routes. URL Segment: 'pageList'. I wondered why. Here is my code.

I have got App module, Console module, and Login module. Here is some key codes:

1. app.html

<router-outlet></router-outlet>

1. app.routes.ts

import { Routes } from '@angular/router';
import { Login } from './login/login/login';
import { Console } from './console/console/console';

export const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: '/login' },
{ path: 'login', component: Login, loadChildren: () => import('./login/login-module').then(m => m.LoginModule) },
{ path: 'console', component: Console, loadChildren: () => import('./console/console-module').then(m => m.ConsoleModule) },

];

1. app.config.ts

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
import { PreloadAllModules, provideRouter, RouteReuseStrategy, withPreloading } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { SimpleReuseStrategy } from './console/SimpleReuseStrategy';

export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
provideBrowserGlobalErrorListeners(),
provideZonelessChangeDetection(),
provideRouter(routes,withPreloading(PreloadAllModules)),
provideClientHydration(withEventReplay()),
{
provide: RouteReuseStrategy, useClass: SimpleReuseStrategy
}
]
};

1. console-routing-module.ts

import { NgModule } from '@angular/core';
import { Router, RouterModule, Routes } from '@angular/router';
import { PageList } from './page-list/page-list';
import { Console } from './console/console';
import { CreatePage } from './create-page/create-page';
import { WordList } from './word-list/word-list';

const routes: Routes = [{
path: 'console', component: Console,
children: [
{ path: '', redirectTo: 'createPage', pathMatch: 'full' },
{ path: 'createPage', component: CreatePage, data: { keep: true, key: 'createPage' } },
{ path: 'pageList', component: PageList, data: { keep: true, key: 'pageList' } },
{ path: 'wordList', component: WordList, data: { keep: true, key: 'wordList' } },
{ path: '**', component: CreatePage }
]
}];

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

constructor(private router:Router) {
console.log(this.router.config);

}

ngOnInit() {

}
}

1. console-module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ConsoleRoutingModule } from './console-routing-module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSelectModule } from '@angular/material/select';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { Console } from './console/console';
import { PageList } from './page-list/page-list';
import { CreatePage } from './create-page/create-page';
import { Router } from '@angular/router';

@NgModule({
declarations: [Console, PageList, CreatePage],
imports: [
CommonModule, MatButtonModule, MatMenuModule, MatDividerModule, MatIconModule, MatSnackBarModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule, MatPaginatorModule,
MatButtonModule, MatMenuModule, MatSelectModule,
MatDatepickerModule, MatPaginatorModule, MatSnackBarModule,
MatDividerModule, MatIconModule,

FormsModule, ReactiveFormsModule,
ConsoleRoutingModule
]
})
export class ConsoleModule {

constructor(private router: Router) {

}

ngOnInit() {

}

}

1. console.html

<div style="width: 100vw;display: flex;margin: 0 auto;">
<!---左边菜单栏-->
<div
style="width: 200px;height: 100vh;background-color: white;border-left: 1px solid #ddd;border-right: 1px solid #ddd;overflow-y: auto;">
<p class="menuSection">文章</p>
<p [ngStyle]="{'background-color': menuText==='createPage' || menuText==='createPage'?'#eee':'white'}" class="menuItem" (click)="onMenuClick('createPage')">写文章</p>
<p [ngStyle]="{'background-color': menuText==='pageList'?'#eee':'white'}" class="menuItem" (click)="onMenuClick('pageList')">文章列表</p>

<p class="menuSection">单词</p>
<p [ngStyle]="{'background-color': menuText==='wordList'?'#eee':'white'}" class="menuItem"
(click)="onMenuClick('wordList')">单词列表</p>
</div>
<!---右边内容栏-->
<div class="rightOutlet">
<router-outlet></router-outlet>
</div>

</div>

1. console.ts

import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({
selector: 'app-console',
//imports: [CommonModule, RouterModule, RouterOutlet],
standalone:false,
templateUrl: './console.html',
styleUrl: './console.scss'
})
export class Console {

private router = inject(Router);

menuText: string = 'createPage';
onMenuClick(text: string) {
this.menuText = text;
this.router.navigate(['../' + this.menuText])
}
}


8.page-list.ts

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

@Component({
selector: 'app-page-list',
standalone:false,
//imports: [],
templateUrl: './page-list.html',
styleUrl: './page-list.scss'
})
export class PageList {

}


The architecture of project is bellow: [project architecture][1] [1]: https://i.sstatic.net/1Kqiskm3.png

Continue reading...