在Angular 9中,使用Ivy进行代码拆分可以通过以下步骤实现:
确认你的Angular CLI 版本是否是9或更高版本。你可以通过运行 ng version
命令来检查。
更新你的 tsconfig.json
文件,将 enableIvy
属性设置为 true
。这将启用Ivy编译器。
{
"compilerOptions": {
"enableIvy": true
}
}
ng generate module feature-module
loadChildren
属性来实现代码拆分。在路由配置中,将 loadChildren
设置为一个返回模块的函数。import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'feature',
loadChildren: () => import('./feature-module/feature-module.module').then(m => m.FeatureModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
FeatureModule
。在该模块中,将需要拆分的组件导入并声明。import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature-component/feature.component';
@NgModule({
declarations: [FeatureComponent],
imports: [
CommonModule
]
})
export class FeatureModule { }
This is a feature component.
// feature.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-feature',
templateUrl: './feature.component.html',
styleUrls: ['./feature.component.css']
})
export class FeatureComponent { }
这样,当访问 'feature' 路由时,Angular 将动态加载 FeatureModule
并渲染 FeatureComponent
。
请注意,使用Ivy进行代码拆分只有在启用Ivy编译器时才会生效。确保在 tsconfig.json
文件中将 enableIvy
属性设置为 true
。