nanotroy

## source.html
curl https://5k42947te1.execute-api.eu-central-1.amazonaws.com/production
...
<app-root class="content" _nghost-sc0="" ng-version="6.1.10"><menu _ngcontent-sc0="" _nghost-sc1="">
<ul _ngcontent-sc1="">
<li _ngcontent-sc1=""><a _ngcontent-sc1="" routerlink="firstComponent" href="/production/firstComponent">First component</a></li>
<li _ngcontent-sc1=""><a _ngcontent-sc1="" routerlink="secondComponent" href="/production/secondComponent">Second component</a></li>
</ul>
</menu><router-outlet _ngcontent-sc0=""></router-outlet>
<ng-component><h1>Hello World!</h1></ng-component></app-root>
...

## package.json
npm run build:serverless:deploy
...
endpoints:
ANY - https://5k42947te1.execute-api.eu-central-1.amazonaws.com/production/{proxy+}
ANY - https://5k42947te1.execute-api.eu-central-1.amazonaws.com/production
functions:
api: angularseo-production-api

## inspect.html
...
<app-root class="content" _nghost-sc0="" ng-version="6.1.10"><menu _ngcontent-sc0="" _nghost-sc1="">
<ul _ngcontent-sc1="">
<li _ngcontent-sc1=""><a _ngcontent-sc1="" routerlink="firstComponent" href="/firstComponent">First component</a></li>
<li _ngcontent-sc1=""><a _ngcontent-sc1="" routerlink="secondComponent" href="/secondComponent">Second component</a></li>
</ul></menu>
<router-outlet _ngcontent-sc0=""></router-outlet><ng-component><h1>Hello World!</h1></ng-component></app-root>
...

## main.server.ts
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
if (environment.production) {
   enableProdMode();
}
export {AppServerModule} from './app/app.server.module';

## angular.json
...
"server": {
   "builder": "@angular-devkit/build-angular:server
   "options": {
      "outputPath": "dist/server",
      "main": "src/main.server.ts",
      "tsConfig": "src/tsconfig.server.json"
   }
}
...

## app.browser.module.ts
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
   bootstrap: [AppComponent],
   imports: [
      BrowserModule.withServerTransition({appId: 'app-root'}),
      AppModule,
   ]

## curl.html
curl localhost:4200
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularSeo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

## menu.component.ts
import { Component } from '@angular/core';
@Component({
   selector: 'app-menu',
   template: `
      <ul>
         <li><a routerLink="firstComponent">First component</a></li>
         <li><a routerLink="secondComponent">Second component</a></li>
      </ul>
   `,
   styles: [`

## app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
@NgModule({
   imports: [
      RouterModule.forRoot([
         { path: '', redirectTo: '/firstComponent', pathMatch: 'full' },
         { path: 'firstComponent', component: FirstComponent },
         { path: 'secondComponent', component: SecondComponent }

## app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
import { MenuComponent } from './menu/menu.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
   declarations: [
	curl https://5k42947te1.execute-api.eu-central-1.amazonaws.com/production
	...
	<app-root class="content" _nghost-sc0="" ng-version="6.1.10"><menu _ngcontent-sc0="" _nghost-sc1="">
	<ul _ngcontent-sc1="">
	<li _ngcontent-sc1=""><a _ngcontent-sc1="" routerlink="firstComponent" href="/production/firstComponent">First component</a></li>
	<li _ngcontent-sc1=""><a _ngcontent-sc1="" routerlink="secondComponent" href="/production/secondComponent">Second component</a></li>
	</ul>
	</menu><router-outlet _ngcontent-sc0=""></router-outlet>
	<ng-component><h1>Hello World!</h1></ng-component></app-root>
	...
	npm run build:serverless:deploy
	...
	endpoints:
	ANY - https://5k42947te1.execute-api.eu-central-1.amazonaws.com/production/{proxy+}
	ANY - https://5k42947te1.execute-api.eu-central-1.amazonaws.com/production
	functions:
	api: angularseo-production-api
	import { enableProdMode } from '@angular/core';
	import { environment } from './environments/environment';
	if (environment.production) {
	enableProdMode();
	}
	export {AppServerModule} from './app/app.server.module';
	...
	"server": {
	"builder": "@angular-devkit/build-angular:server
	"options": {
	"outputPath": "dist/server",
	"main": "src/main.server.ts",
	"tsConfig": "src/tsconfig.server.json"
	}
	}
	...
	import { AppComponent } from './app.component';
	import { AppModule } from './app.module';
	import { NgModule } from '@angular/core';
	import { BrowserModule } from '@angular/platform-browser';
	@NgModule({
	bootstrap: [AppComponent],
	imports: [
	BrowserModule.withServerTransition({appId: 'app-root'}),
	AppModule,
	]
	curl localhost:4200
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>AngularSeo</title>
	<base href="/">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	</head>
	import { NgModule } from '@angular/core';
	import { RouterModule } from '@angular/router';
	import { FirstComponent } from './first/first.component';
	import { SecondComponent } from './second/second.component';
	@NgModule({
	imports: [
	RouterModule.forRoot([
	{ path: '', redirectTo: '/firstComponent', pathMatch: 'full' },
	{ path: 'firstComponent', component: FirstComponent },
	{ path: 'secondComponent', component: SecondComponent }