如何在Angular 6中的单个项目下的多个应用程序之间导航

Question

我在 Angular 6 中的单个项目下创建了多个应用程序，如 Multiple application under single project in Angular 6 文章中所述。

如何在我的单个 Angular 项目中的这些应用程序之间导航？

我尝试了window.location = "path/to/app2/index.html";，但它返回给我的错误是路径不正确。

Answer 1

我认为您误解了 Angular 项目支持多个应用程序的目的。

我认为这个功能主要支持两种情况：

1. 一个库项目，以及一个用于练习它的示例应用程序。

2. 使用相同或相似的 NPM 库集的多个通常相似的应用程序。在这种情况下，优点是您可以在项目级别安装库一次，而不必在每个应用程序中安装它们。有关如何完成此操作的示例，请参阅https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project。

这些用例都不涉及同时运行两个 Angular 应用程序，并在它们之间切换。据我所知，这是不支持的。

您可能想要做的是将两个应用程序中的组件组合到一个应用程序中，每个以前的应用程序都在它自己的模块中。然后，您可以使每个模块延迟加载，并使用应用程序的顶级路由器在两个模块之间切换。

Answer 2

我可以想象场景（单回购），我们有工作区：

ng new MyWorkspace --create-application=false

并且在工作空间下有多个前端（所以多个应用程序）：

ng generate application dashboard-app --routing=true
ng generate application admin-app --routing=true
ng generate application three-app --routing=true
ng generate application fourth-app --routing=true
...

所有这些应用程序：

1. 需要“独立”——这样我才能在特定时间开发（从而销毁、测试和交付）一个应用程序。我也可以将他支付/需要/使用的应用程序交付给客户。要使用此类设置，我需要在命令中指定应用程序名称，例如：

ng serve dashboard-app
ng generate component myNewComponent --project=dashboard-app

angular.json

 "scripts": {
    ...
    "build-all": "ng build dashboard-app && ng build admin-app && ...",
    "build-all-prod": "ng build dashboard-app --prod && ng build admin-app --prod && ...",
    ...
}

package.json

"architect": {
        "build": {
            ...
            "baseHref": "/DASHBOARD/",
            "deployUrl": "/DASHBOARD/"
            ...

• 所以构建将在 disc\DASHBOARD、disc\ADMIN 等中生成。
• 我可以将所有这些应用程序部署到服务器，“起始页”将类似于 url:port/DASHBOARD、url:port/ADMIN 等。

1. 共享相同的 package.json - 所以我“强制”（当然从长远来看它比依赖地狱更好）在所有应用程序中使用相同的版本。

2. 必须具有相同的品牌：菜单、页眉、页脚（所以页面、徽标、css、服务等） - 为了解决这个问题，我们可以在 Angular 工作区下创建共享模块：

    ng generate library layout-lib

• 但在菜单中存在链接问题：如果您在仪表板应用程序中“角度路由器链接”到管理应用程序是未知的（不起作用），反之亦然。另一方面，如果您使用“html 链接”（href），则此类链接会将请求发送到后端服务器并重新加载 SPA。解决方案是在“href”链接中组合“angular routerLink”链接。这只是一个想法（聪明的解决方案是在代码中生成菜单）：

dashboard-app: app-routing.module.ts

const routes: Routes = [
  {path: 'firstpage', component: FirspageComponent},
  {path: 'secondpage', component: SecondpageComponent}
];

admin-app: app-routing.module.ts

const routes: Routes = [
  {path: 'firstpage', component: FirspageComponent},
  {path: 'secondpage', component: SecondpageComponent}
];

layout-lib：菜单组件html

<div class="vertical-menu">
  <ng-container *ngIf="isDashboardApp()">
    <a routerLink="/firstpage">App DASH - page 1 - RL</a>
    <a routerLink="/secondpage">App DASH - page 2 - RL</a>
    <a href="/app-beta/firstpage">App ADMIN- page 1</a>
    <a href="/app-beta/secondpage">App ADMIN- page 2</a>
  </ng-container>
  <ng-container *ngIf="isAdminApp()">
    <a href="/app-alfa/firstpage">App DASH - page 1</a>
    <a href="/app-alfa/secondpage">App DASH - page 2</a>
    <a routerLink="/firstpage">App ADMIN- page 1 - RL</a>
    <a routerLink="/secondpage">App ADMIN- page 2 - RL</a>
  </ng-container>
</div>

layout-lib: 菜单组件 ts

export class MenuComponent implements OnInit {
  baseHref: string;
  constructor(private locationStrategy: LocationStrategy) {
    this.baseHref = this.locationStrategy.getBaseHref();
  }

  ngOnInit(): void {
  }

  isDashboardApp(): boolean {
    return this.baseHref === '/DASHBOARD/';
  }

  isAdminApp(): boolean {
    return this.baseHref === '/ADMIN/';
  }
}

下一个问题是解决授权/身份验证（因此应用程序的行为类似于 “单点登录”）。

最后，应用程序（dashbaord-app、admin-app、...）将具有如下主要组件：

<div class="layout-wrapper">

  <div class="layout-content-wrapper">
    <lib-topbar></lib-topbar>

    <div class="layout-content">
      <router-outlet></router-outlet>
    </div>

    <lib-footer></lib-footer>

  </div>

  <lib-menu></lib-menu>

</div>

所有这些 都是从库 layout-lib 共享的。