how to navigate between multiple applications under single project in Angular 6

Question

I created multiple applications under single project in Angular 6 as described in Multiple application under single project in Angular 6 article.

How can I navigate between these applications inside my single angular project?

I tried window.location = "path/to/app2/index.html"; but it returns to me error that path is incorrect.

Answer 1

I think that you have misunderstood the purpose of an Angular project supporting multiple applications.

There are basically two scenarios that I believe that this feature is meant to support:

1. A library project, and a sample application that is used to exercise it.

2. Multiple, usually similar applications that use the same or similar sets of NPM libraries. In this case, the advantage is that you can install the libraries at the project level once, instead of having to install them in each application. For an example of how this is done, see https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project.

Neither of these use-cases involves running two Angular applications at the same time, and switching between them. As far as I know, this is not supported.

What you may want to do instead is to combine the components from both applications into one application, with each former application in it's own module. You can then make each of these modules lazy-loaded, and use the application's top-level router to switch between the two modules.

Answer 2

I can imagine scenario (mono repo), where we have workspace:

ng new MyWorkspace --create-application=false

And under workspace multiple frontends (so multiple applications):

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

All these applications:

1. needs to be "independent" - so I can develop (thus destroy, test and deliver) just one application at certain time. Also I can deliver to the customer just applications he paid/requires/uses. To work with such setup I need specify application name in commands, e.g:

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 will be generated in disc\DASHBOARD, disc\ADMIN, etc.
• and I can deploy all these applications to the server and "start page" will be like url:port/DASHBOARD, url:port/ADMIN, etc.

2. share the same package.json - so I'm "force" (of course from long perspective it is better than dependency hell) to use the same versions in all applications.

3. must have the same brand: menu, header, footer (so pages, logo, css, services, etc.) - so to solve this, we can create shared module under angular workspace:

    ng generate library layout-lib

• but within menu there is issue with links: if you are in dashboard-app "angular routerLink" to admininstration-app is unknow (does not work) and vice versa. On the other hand, if you use "html link" (href), then such link sends request to the backend server and SPA is reloaded. Solution is to combine "angular routerLink" links within "href" links. Here is just idea (clever solution would be to generate menu in the code):

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: menu component 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: menu component 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/';
  }
}

Next issue is to solve authorization/authentication (so applications behave like "SingleSignOn").

And finally the application (dashbaord-app, admin-app, ...) will have main component like:

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

All these <lib-...> are shared from library layout-lib.