Skip to content

Instantly share code, notes, and snippets.

View 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>
...
View 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
View 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>
...
View main.server.ts
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
export {AppServerModule} from './app/app.server.module';
View angular.json
...
"server": {
"builder": "@angular-devkit/build-angular:server
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
}
}
...
View 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,
]
View 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>
View 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: [`
View 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 }
View 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: [
You can’t perform that action at this time.