Angular 路由懒加载是一种将应用程序的模块分成较小的块并根据需要加载这些块的策略。这可以提高应用程序的性能,因为只有在需要使用时才加载必要的代码。
以下是实现 Angular 路由懒加载的示例:
1.在 app-routing.module.ts 文件中定义路由:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
},
{
path: 'about',
loadChildren: () => import('./about/about.module').then(m => m.AboutModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
2.在被分离的模块中创建一个模块文件(如 home.module.ts),并在其中定义路由:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
const routes: Routes = [
{
path: '',
component: HomeComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
3.在模块文件中创建组件(如 home.component.ts):
import { Component } from '@angular/core';
@Component({
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {}
4.更新 app.module.ts 文件以引入被分离的模块:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HomeModule } from './home/home.module';
import { AboutModule } from './about/about.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
上一篇:Angular路由空路径问题