在Angular中,可以使用延迟加载的路由来加载外部模块。以下是一个解决方法的示例:
ExternalModule
,该模块将被延迟加载。// external.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [/* 外部模块的组件声明 */],
imports: [
CommonModule,
/* 外部模块的其他依赖模块 */
]
})
export class ExternalModule { }
loadChildren
,并指定外部模块的路径。// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'external-feature',
loadChildren: () => import('./external/external.module').then(m => m.ExternalModule)
},
/* 其他路由配置 */
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Go to External Feature
这样,当用户点击"Go to External Feature"链接时,Angular将会延迟加载ExternalModule
模块,并在router-outlet
中显示该模块的组件。
请注意,延迟加载的模块必须是使用RouterModule.forChild()
方法进行配置的子模块。