【亲测可用→防止入坑Routes】设置angular10项目异步加载、惰性加载、懒加载路由

ng n RouingApp --routing
cd RouingApp
ng g c components/first
ng g c components/second
ng g m components/second --routing

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {SecondComponent} from "./second.component";
const routes: Routes = [
  {
    path: '',//默认被异步加载该模块的时候自动引入SecondComponent
    component: SecondComponent,
  },
];
@NgModule({
  imports: [RouterModule.forChild(routes)],//注意用于懒加载的模块必须是forChild方式引入
  exports: [RouterModule]
})
export class SecondRoutingModule {
}

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {FirstComponent} from './components/first/first.component';
import {ChildComponent} from './components/first/child/child.component';
import {PageNotFoundComponent} from './components/first/pageNotFound.component';
const routes: Routes = [
  {
    path: '',
    redirectTo: 'first',
    pathMatch: 'full'
  },
  {
    path: 'first',
    component: FirstComponent,//同步加载
    //子路由
    children: [
      {
        path: 'child',
        component: ChildComponent,
      }
    ]
  },
  {
    path: 'second',
    // loadChildren: './components/second/second.module',//异步加载、惰性加载、懒加载（已失效）
    loadChildren: () => import('./components/second/second.module').then(m => m.SecondModule),//异步加载、惰性加载、懒加载
  },
  { 
    path: '**',
    component: PageNotFoundComponent //当输入路由错误的时候跳转到此页面
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

<button routerLink="/">跳转到first</button>&nbsp;<button [routerLink]="['/']">跳转到first</button>
<br><br>
<button routerLink="/second">跳转到second</button>&nbsp;<button [routerLink]="['/second']">跳转到second</button>
<br><br>
<router-outlet></router-outlet>

ng s --open