angular - 为什么延迟加载路由在 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 { }

应用模块.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 { }

配置文件-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 { }

核心路由.module.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配置。但是每当我尝试导航到时/profile route，它总是带我到仪表板。我不知道为什么它没有加载module和它的component.

标签： angularlazy-loadingangular-routing

Answer 1

应用模块.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