如何将 Angular 应用程序用于另一个 Angular 应用程序的子路由？答案

【问题标题】：How can I use an Angular app into child routes of another Angular app?如何将 Angular 应用程序用于另一个 Angular 应用程序的子路由？
【发布时间】：2018-12-10 18:36:39
【问题描述】：

我想使用延迟加载（当用户点击特定路线时）将 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。

【问题讨论】：

标签： javascript angular angular-module

【解决方案1】：

要么：

不要引导您的子应用程序并将其用作子模块（这需要您将主应用程序升级到 Angular 6，这至少需要重构您的 RxJS 操作符调用，可能还有其他一些小事），李>
或者只是配置您的 Web 服务器以在特定 URL 上为您的子应用程序提供服务。在这种情况下，您的两个应用程序将无法共享任何状态（全局命名空间、cookie 和 localStorage 除外）或 Angular 组件/服务/指令/管道

【讨论】：

你也可以看看angular.io/guide/elements - 当然这绝不是一种直截了当的方法
但是当用户点击特定网址时，如何加载外部模块（Angular 应用程序）以便在我的应用程序中使用？
您必须按照以下指南将您的子应用程序包含在主应用程序构建中：angular.io/guide/lazy-loading-ngmodules，但您的子应用程序将不会被引导，然后将无法作为独立应用程序运行
我想在子路由中运行那个“子应用”，做类似{ path: 'specific', loadChildren: 'app.module' }
让我们continue this discussion in chat.