在使用Angular 9和Single SPA时,遇到子路由问题的解决方法如下:
const routes: Routes = [
{ path: 'app1', component: App1Component, children: [
{ path: 'child', component: ChildComponent }
]},
{ path: 'app2', component: App2Component },
// 其他路由配置...
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
用于显示子路由的内容:
const routes: Routes = [
{ path: '', component: HomeComponent },
// 其他子路由配置...
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
用于显示子路由的内容:
output
的jsonpFunction
设置为webpackJsonpapp1
,以避免子应用之间的全局命名冲突:// 子应用的 webpack.config.js 或 angular.json
module.exports = {
// ...
output: {
// ...
jsonpFunction: 'webpackJsonpapp1',
},
};
System.import
加载子应用的路由模块:const loadChildRoutes = () => System.import('app1').then(module => module.AppRoutingModule);
// 或者使用 import() 语法:
// const loadChildRoutes = () => import('app1').then(module => module.AppRoutingModule);
const routes = [
{ path: '/app1', name: 'app1', loader: loadChildRoutes },
// 其他子应用的配置...
];
const singleSpaAngularCli = singleSpaAngularCli({
// ...
mainModule: loadRootRoutes,
// ...
});
这样,当访问根应用的/app1/child
路径时,会加载App1Component
作为根组件,然后在App1Component
中的模板中的
中显示ChildComponent
的内容。