在 Angular 9 中创建具有延迟加载的模块 - Javascript

在Angular 9中，我们可以延迟加载模块来提高应用程序的性能和速度。这意味着只有当需要时才会加载该模块，而不是在应用程序启动时全部加载。当然，在我们的应用程序中，我们可以通过使用路由器模块来实现延迟加载。以下是如何在Angular 9中创建具有延迟加载的模块。

步骤 1: 创建一个模块

首先，我们需要创建一个模块，我们将其命名为 lazy.module.ts。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LazyComponent } from './lazy.component';

@NgModule({
  declarations: [
    LazyComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', component: LazyComponent }
    ])
  ]
})
export class LazyModule { }

步骤 2: 创建一个组件

接下来，我们需要创建一个组件，我们将其命名为 lazy.component.ts。

import { Component } from '@angular/core';

@Component({
  template: `
    <p>这是Lazy模块。</p>
  `
})
export class LazyComponent { }

步骤 3: 配置我们的路由

配置我们的路由需要使用Angular 9的LazyLoading特性。我们将延迟加载LazyModule组件。我们在路由器模块中定义它们。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

步骤 4: 懒加载它

现在，我们已经完成了所有需要的文件。我们需要做的就是在应用程序中懒加载LazyModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤 5: 测试

现在，我们已经完成了我们的所有文件。我们可以运行应用程序并测试延迟加载模块。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink="/home" routerLinkActive="active">Home</a>
      <a routerLink="/lazy" routerLinkActive="active">Lazy</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class AppComponent { }

我们可以使用以下命令运行应用程序：

ng serve

您也可以从浏览器中打开以下地址：http://localhost:4200/

现在，当您单击“Lazy”链接时，应用程序将延迟加载模块。