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

How can I use an Angular app into child routes of another Angular app?

我想使用延迟加载(当用户点击特定路径时)将一个 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) 我想知道这是否正确,and/or 还有另一种方法可以做到这一点。

2) 另一个问题是 child app 使用 Angualr 6,而 second/main 使用 Angular 4.

或者:

  • 不要 bootstrap 您的子应用程序并将其用作子模块(这需要您将主应用程序升级到 Angular 6,这至少需要重构您的 RxJS 运算符调用,可能还有其他一些小事),
  • 或者只配置您的网络服务器以在特定 URL 上为您的子应用程序提供服务。在这种情况下,您的两个应用程序将无法共享任何状态(全局命名空间、cookies 和 localStorage 除外)或 AngularComponent/Service/Directive/Pipe