javascript - 如何将 Angular 应用程序用于另一个 Angular 应用程序的子路由?
问题描述
我想使用延迟加载(当用户点击特定路线时)将 Angular 应用程序加载到另一个 Angular 应用程序中我应该编译第一个应用程序以便用于第二个应用程序还是什么?
要嵌套到 Angular 应用程序中的应用程序的路由模块:
const upgradeRoutes: Routes = [
{
path: '/upgrade',
component: HelloComponent
},
{ path: '', redirectTo: '/upgrade', pathMatch: 'full' }
];
@NgModule({
imports: [
RouterModule.forChild(upgradeRoutes)
],
exports: [
RouterModule
],
declarations: []
})
export class UpgradeRoutingModule { }
嵌套到 Angular 应用程序中的应用程序模块
@NgModule({
declarations: [
AppComponent,
HelloComponent
],
imports: [
CommonModule,
UpgradeRoutingModule
],
exports: [
UpgradeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class UpgradeModule { }
我想使用(延迟加载)子路由中描述的第一个应用程序模块:
import {UpgradeModule} from '../../node_modules/module-upgrade/src/app/app.module'
@NgModule({
declarations: [
...
],
import: [ UpgradeModule ]
});
1)我想了解这是否正确,和/或有另一种方法。
2)另一个问题是子应用程序使用 Angular 6,而第二个/主要应用程序使用 Angular 4。
解决方案
任何一个:
- 不要引导您的子应用程序并将其用作子模块(这需要您将主应用程序升级到 Angular 6,这至少需要重构您的 RxJS 操作员调用,可能还有一些其他的小事),
- 或者只是配置您的 Web 服务器以在特定 URL 上为您的子应用程序提供服务。在这种情况下,您的两个应用程序将无法共享任何状态(全局命名空间、cookie 和 localStorage 除外)或 Angular 组件/服务/指令/管道
推荐阅读
- reactjs - 使用“valuePropName:'defaultValue'”时动态antd表单初始值设置问题
- javascript - 为什么即使在捕获错误之后 fetch 也会返回?
- node.js - 来自 Node.js 的 Microsoft Dynamics NAV '18 Web 服务的 NTLM 身份验证失败
- javascript - 如何使用jquery从两个表中删除匹配的记录
- javafx - 单击列表视图中的项目时,显示详细信息
- angular - 在 Angular 上初始化变量(包括 observables):构造函数、声明还是 ngOnInit?
- c# - 动态设置 Jquery 微调器最小值
- apache-flink - Flink,检查点的基本规则?
- openshift - 修改(和应用)OpenShift 模板时动态应用更改
- docker - Jenkins Docker 映像 - 仅将“作业”文件夹放入命名卷时的权限问题