Multiple Angular App on same domain using Nginx - appTwo

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RouteOneComponent } from './components/route-one/route-one.component';
import { RouteTwoComponent } from './components/route-two/route-two.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'routeOne' },
  { path: 'routeOne', component: RouteOneComponent },
  { path: 'routeTwo', component: RouteTwoComponent },
  { path: '**', redirectTo: 'routeOne' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div class="app-container">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">App Two</a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a
            class="nav-link"
            [routerLink]="['/routeOne']"
            routerLinkActive="router-link-active"
            >Route One</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            [routerLink]="['/routeTwo']"
            routerLinkActive="router-link-active"
            >Route Two</a
          >
        </li>
      </ul>
    </div>

    <a href="/" class="btn btn-primary">Website</a>
  </nav>

  <router-outlet></router-outlet>
</div>

routeOne.component.html

<div class="container">
  <div class="jumbotron">
    <h1 class="display-4">Route One!</h1>
    <p class="lead">Simple content for Route One...</p>
    <hr class="my-4" />
    <p>
      It uses utility classes for typography and spacing to space content out
      within the larger container.
    </p>
    <a class="btn btn-primary btn-lg" [routerLink]="['/routeTwo']" routerLinkActive="router-link-active"
      role="button">Switch to Route Two</a>
  </div>
</div>

routeTwo.component.html

<div class="container">
  <div class="jumbotron color">
    <h1 class="display-4">Route Two!</h1>
    <p class="lead">Simple content for Route Two...</p>
    <hr class="my-4" />
    <p>
      It uses utility classes for typography and spacing to space content out
      within the larger container.
    </p>
    <a
      class="btn btn-primary btn-lg"
      [routerLink]="['/routeOne']"
      routerLinkActive="router-link-active"
      role="button"
      >Switch to Route One</a
    >
  </div>
</div>

style.scss

@import "~bootstrap/dist/css/bootstrap.min.css";
/* You can add global styles to this file, and also import other style files */

.container {
  margin-top: 20px;
}

.jumbotron {
  background-color: #e9ecef;

  &.color {
    background-color: #cccccc;
  }
}