为什么Lazy负载路由在angular12中不起作用

Question

我有一些模块要延迟加载。但当我定义他们的懒惰加载路由时，这些路由不起作用，也不在浏览器中加载。当我试图通过浏览器导航到他们的路线时，每次都会转到仪表板。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CoreModule } from './core/core.module';
import { ClaimModule } from './modules/claim/claim.module';
import { DependentModule } from './modules/dependent/dependent.module';
import { ProfileModule } from './modules/profile/profile.module';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
CoreModule,
ClaimModule,
DependentModule,
ProfileModule,
FormsModule,
RouterModule,
ModalModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app-module.routing.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './core/components/login/login.component';
import { AuthGuard } from './core/guard/auth.guard';
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{
path: '',
canActivate: [AuthGuard],
loadChildren: () => import('./core/core.module').then(m => m.CoreModule)
},
{
path: 'dependent',
canActivate: [AuthGuard],
loadChildren: () => import('./modules/dependent/dependent.module').then(m => m.DependentModule)
},
{
path: 'profile',
loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

profile-module.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProfileComponent } from './profile.component';
const routes: Routes = [
{ path: '', component: ProfileComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ProfileRoutingModule { }

profile.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProfileComponent } from './profile.component';
import { ProfileRoutingModule } from './profile-routing.module';

@NgModule({
declarations: [
ProfileComponent
],
imports: [
CommonModule,
ProfileRoutingModule
],
exports: [ProfileComponent]
})
export class ProfileModule { }

核心程序模块.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout/layout.component';
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: () => import('./../modules/dashboard/dashboard.module').then(m => m.DashboardModule) },
]
},
{
path: '**',
redirectTo: '/dashboard',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CoreRoutingModule { }

layout.component.html

<div class="wrapper w-100">
<!-- Navbar -->
<app-header></app-header>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<app-sidebar></app-sidebar>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<router-outlet></router-outlet>
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<app-control-sidebar></app-control-sidebar>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<app-footer></app-footer>
</div>
<!-- ./wrapper -->

这是我的全route配置。但每当我尝试导航到/profileroute时，它总是会把我带到仪表板。我不知道它为什么不加载module和它的component。

Answer 1

app-module.routing.ts

空路径应具有pathMatch:"full"，否则所有url都将转到coreRoutingModule

{
path: '',
canActivate: [AuthGuard],
loadChildren: () => import('./core/core.module').then(m => m.CoreModule),
pathMatch: 'full'
},

文档：https://angular.io/api/router/Route#pathMatch