Skip to content

Instantly share code, notes, and snippets.

@nfourre
Last active June 6, 2019 07:47
Show Gist options
  • Save nfourre/3b826e0b6d97e8e92b8ac7ee5cfd5dea to your computer and use it in GitHub Desktop.
Save nfourre/3b826e0b6d97e8e92b8ac7ee5cfd5dea to your computer and use it in GitHub Desktop.
Multiple Angular App on same domain using Nginx - appTwo
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 {}
<!--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>
<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>
<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>
@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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment