創(chuàng)建一個(gè)帶路由的項(xiàng)目，依次執(zhí)行下面每行代碼

ng n RouingApp --routingcd RouingAppng g c components/firstng g c components/secondng 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: '',//默認(rèn)被異步加載該模塊的時(shí)候自動(dòng)引入SecondComponentcomponent: 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 //當(dāng)輸入路由錯(cuò)誤的時(shí)候跳轉(zhuǎn)到此頁面}
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule {
}

把a(bǔ)pp.component.html代碼改成如下

<button routerLink="/">跳轉(zhuǎn)到first</button>&nbsp;<button [routerLink]="['/']">跳轉(zhuǎn)到first</button><br><br><button routerLink="/second">跳轉(zhuǎn)到second</button>&nbsp;<button [routerLink]="['/second']">跳轉(zhuǎn)到second</button><br><br><router-outlet></router-outlet>

運(yùn)行項(xiàng)目

ng s --open

訪問http://localhost:4200就可以了?

💡強(qiáng)哥提示：

如不小心創(chuàng)建錯(cuò)了目錄要?jiǎng)h除，命令是 rd/s/q 路徑/文件夾

如果不小心把a(bǔ)pp-routing.module.ts或app.module.ts這種路由文件刪除了，可以用以下命令：
單獨(dú)添加app路由文件：ng g m app-routing --flat
單獨(dú)添加app模塊文件：ng g m app?--flat
添加app路由以及模塊文件：ng g m app --routing --flat

總結(jié)

以上是生活随笔為你收集整理的【亲测可用→防止入坑Routes】设置angular10项目异步加载、惰性加载、懒加载路由的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。