Ленивый маршрутизация не работает в Angular 20, она стала ошибкой Runtimeerror: NG04002 ⇐ Javascript

[Anonymous]

Я разрабатываю угловое приложение, и версия не работала так, как я хочу. У меня есть несколько модулей в этом приложении, и я использовал ленивую маршрутизацию. Но когда я попытался перейти к маршруту подмодуля, но он не удался с ошибкой RuntimeError: NG04002: не может соответствовать каким -либо маршрутам . Сегмент URL: 'Pagelist'. Я удивлялся почему. Вот мой код. < /P>
У меня есть модуль приложения, консольный модуль и модуль входа в систему. Вот некоторые коды ключей: < /p>

[*] App.html
< /ol>

Код: Выделить всё

< /code>

[*] App.routes.ts
< /ol>
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) },

];
< /code>

[*] App.config.ts
< /ol>
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
}
]
};
< /code>

[*]console-routing-module.ts
< /ol>
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() {

}
}
< /code>

[*]console-module.ts
< /ol>
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() {

}

}
< /code>

[*]console.html
< /ol>



文章
写文章
文章列表

单词
(click)="onMenuClick('wordList')">单词列表






< /code>

[*]console.ts
< /ol>
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])
}
}
< /code>
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 {

}

Архитектура проекта - ниже:
[архитектура проекта] [1]
[1]: https://i.sstatic.net/1kqiskm3.png

Подробнее здесь: https://stackoverflow.com/questions/797 ... or-ng04002