Question

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

如何在单个角度项目中在这些应用程序之间导航？

我尝试了window.location = "path/to/app2/index.html";，但它向我返回了错误的路径错误提示。

Answer 1

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

我认为基本上有两种情况可以支持此功能：

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

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

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

Answer 2

我可以想象场景（mono repo），我们有工作区：

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
...

所有这些应用程序：

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

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/"
            ...

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

共享相同的 package.json - 所以我“强制”（当然从长远来看，它比依赖地狱要好）在所有应用程序中使用相同的版本。
必须有相同的品牌：菜单、页眉、页脚（所以页面、标志、css、服务等） - 所以为了解决这个问题，我们可以在 angular 工作区下创建共享模块：

    ng generate library layout-lib

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

仪表板应用：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 共享的。

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

2 个答案: