feat: add ssr with lambda@edge

Author: eelayoubi

.gitignore

@@ -10,6 +10,8 @@
 # dependencies
 /node_modules
 
+.serverless
+
 # profiling files
 chrome-profiler-events*.json
 speed-measure-plugin*.json

angular.json

@@ -17,7 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/angular-lambda-ssr",
+            "outputPath": "dist/angular-lambda-ssr/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -102,7 +102,8 @@
             "tsConfig": [
               "tsconfig.app.json",
               "tsconfig.spec.json",
-              "e2e/tsconfig.json"
+              "e2e/tsconfig.json",
+              "tsconfig.server.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -120,6 +121,74 @@
               "devServerTarget": "angular-lambda-ssr:serve:production"
             }
           }
+        },
+        "serverless": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/angular-lambda-ssr/serverless",
+            "main": "serverless.ts",
+            "tsConfig": "tsconfig.serverless.json"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "sourceMap": false,
+              "optimization": true
+            }
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/angular-lambda-ssr/server",
+            "main": "server.ts",
+            "tsConfig": "tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "sourceMap": false,
+              "optimization": true
+            }
+          }
+        },
+        "serve-ssr": {
+          "builder": "@nguniversal/builders:ssr-dev-server",
+          "options": {
+            "browserTarget": "angular-lambda-ssr:build",
+            "serverTarget": "angular-lambda-ssr:server"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-lambda-ssr:build:production",
+              "serverTarget": "angular-lambda-ssr:server:production"
+            }
+          }
+        },
+        "prerender": {
+          "builder": "@nguniversal/builders:prerender",
+          "options": {
+            "browserTarget": "angular-lambda-ssr:build:production",
+            "serverTarget": "angular-lambda-ssr:server:production",
+            "routes": [
+              "/"
+            ]
+          },
+          "configurations": {
+            "production": {}
+          }
         }
       }
     }

event.json

@@ -0,0 +1,62 @@
+{
+  "Records": [
+    {
+      "cf": {
+        "config": {
+          "distributionDomainName": "d123.cloudfront.net",
+          "distributionId": "EDFDVBD6EXAMPLE",
+          "eventType": "viewer-request",
+          "requestId": "MRVMF7KydIvxMWfJIglgwHQwZsbG2IhRJ07sn9AkKUFSHS9EXAMPLE=="
+        },
+        "request": {
+          "body": {
+            "action": "read-only",
+            "data": "eyJ1c2VybmFtZSI6IkxhbWJkYUBFZGdlIiwiY29tbWVudCI6IlRoaXMgaXMgcmVxdWVzdCBib2R5In0=",
+            "encoding": "base64",
+            "inputTruncated": false
+          },
+          "clientIp": "2001:0db8:85a3:0:0:8a2e:0370:7334",
+          "querystring": "size=large",
+          "uri": "/",
+          "method": "GET",
+          "headers": {
+            "host": [
+              {
+                "key": "Host",
+                "value": "d111111abcdef8.cloudfront.net"
+              }
+            ],
+            "user-agent": [
+              {
+                "key": "User-Agent",
+                "value": "curl/7.51.0"
+              }
+            ]
+          },
+          "origin": {
+            "custom": {
+              "customHeaders": {
+                "my-origin-custom-header": [
+                  {
+                    "key": "My-Origin-Custom-Header",
+                    "value": "Test"
+                  }
+                ]
+              },
+              "domainName": "example.com",
+              "keepaliveTimeout": 5,
+              "path": "/custom_path",
+              "port": 443,
+              "protocol": "https",
+              "readTimeout": 5,
+              "sslProtocols": [
+                "TLSv1",
+                "TLSv1.1"
+              ]
+            }
+          }
+        }
+      }
+    }
+  ]
+}

instructions.txt

@@ -0,0 +1,33 @@
+
+- prerequisites:
+    - aws account
+    - aws cli configure
+    - serverless framework installed
+    
+- install ng add @nguniversal/express-engine
+- add serverless.ts (to keep things clean)
+- add serverless in angular.json (to keep things clean)
+- add ServerTransferStateModule in app.server.module.ts
+- add TransferHttpCacheModule in app.module.ts
+- add lambda.js file
+- run yarn add html-minifier
+- add in package.json:
+    "build:sls": "ng build --prod && ng run angular-lambda-ssr:serverless:production"
+- deploy serverless distribution:
+    serverless deploy --config serverless-distribution.yml
+- replace the url in search.servicee with the cloudfront endpoint
+- build:
+    yarn build:sls
+- upload dist to s3:
+      aws s3 sync . s3://eelayoubi-ssr-test --profile A4L-MASTER
+- deploy lambda stack
+    serverless deploy
+- attach lambda to cloudfront origin request
+
+# cleanup
+- empty the bucket that contains the dist (if not empty, cannot be deleted)
+- delete distribution stack:
+     serverless remove --config serverless-distribution.yml
+- wait for a while then delete lambda stack
+    serverless remove
+    

lambda.js

@@ -0,0 +1,43 @@
+
+const path = require('path')
+const serverless = require('serverless-http');
+const minify = require('html-minifier').minify;
+
+const { app } = require("./dist/angular-lambda-ssr/serverless/main");
+
+const handle = serverless(app, {
+    provider: 'aws',
+    type: 'lambda-edge-origin-request'
+});
+
+const handler = async (event, context, callback) => {
+    const request = event.Records[0].cf.request;
+
+
+    if ((!path.extname(request.uri)) || (request.uri === '/index.html')) {
+        const response = await handle(event, context);
+        let minified = minify(response.body, {
+            caseSensitive: true,
+            collapseWhitespace: true,
+            preserveLineBreaks: true,
+            removeAttributeQuotes: true,
+            removeComments: true
+        });
+        console.log('response: ', response)
+        callback(null, {
+            status: response.status,
+            statusDescription: response.statusDescription,
+            headers: {
+                ...response.headers,
+            },
+            body: minified,
+            bodyEncoding: response.bodyEncoding
+        });
+    } else {
+        console.log(`${request.uri} directly served from S3`)
+        return request;
+    }
+
+}
+
+exports.handler = handler;

package-lock.json

@@ -7,7 +7,12 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "dev:ssr": "ng run angular-lambda-ssr:serve-ssr",
+    "serve:ssr": "node dist/angular-lambda-ssr/server/main.js",
+    "build:ssr": "ng build --prod && ng run angular-lambda-ssr:server:production",
+    "prerender": "ng run angular-lambda-ssr:prerender",
+    "build:sls": "ng build --prod && ng run angular-lambda-ssr:serverless:production"
   },
   "private": true,
   "dependencies": {
@@ -18,15 +23,22 @@
     "@angular/forms": "~11.0.4",
     "@angular/platform-browser": "~11.0.4",
     "@angular/platform-browser-dynamic": "~11.0.4",
+    "@angular/platform-server": "~11.0.4",
     "@angular/router": "~11.0.4",
+    "@nguniversal/express-engine": "^11.0.1",
+    "express": "^4.15.2",
+    "html-minifier": "^4.0.0",
     "rxjs": "~6.6.0",
+    "serverless-http": "eelayoubi/serverless-http",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1100.4",
     "@angular/cli": "~11.0.4",
     "@angular/compiler-cli": "~11.0.4",
+    "@nguniversal/builders": "^11.0.1",
+    "@types/express": "^4.17.0",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",

package.json

@@ -0,0 +1,60 @@
+import 'zone.js/dist/zone-node';
+
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import * as express from 'express';
+import { join } from 'path';
+
+import { AppServerModule } from './src/main.server';
+import { APP_BASE_HREF } from '@angular/common';
+import { existsSync } from 'fs';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const distFolder = join(process.cwd(), 'dist/angular-lambda-ssr/browser');
+  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule,
+  }));
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));
+
+  // All regular routes use the Universal engine
+  server.get('*', (req, res) => {
+    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+  });
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env.PORT || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+const moduleFilename = mainModule && mainModule.filename || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
+  run();
+}
+
+export * from './src/main.server';

server.ts

@@ -0,0 +1,83 @@
+service: angular-lambda-ssr-distribution
+
+provider:
+  name: aws
+  region: us-east-1
+
+resources:
+  Resources:
+   
+    # the origin Identity that we will use in S3, to only allow a specific cloudfront distribution
+    # access to the S3 content, to keep S3 private
+    CloudFrontIdentity:
+      Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
+      Properties:
+        CloudFrontOriginAccessIdentityConfig:
+          Comment: cf-accessidentity
+
+    # the cloudfront distribution
+    CloudFrontDistribution:
+      Type: AWS::CloudFront::Distribution
+      Properties:
+        DistributionConfig:
+          DefaultCacheBehavior:
+            ForwardedValues:
+              QueryString: true
+              Cookies:
+                Forward: none
+            TargetOriginId: S3
+            Compress: true
+            ViewerProtocolPolicy: redirect-to-https
+            MaxTTL: 86400
+            DefaultTTL: 86400
+            MinTTL: 86400
+          DefaultRootObject: index.html
+          HttpVersion: http2
+          Enabled: true
+          IPV6Enabled: true
+          PriceClass: PriceClass_All
+          Origins:
+            - DomainName: !Join 
+              - ''
+              - - !Ref MyS3Bucket
+                - .s3.amazonaws.com
+              S3OriginConfig:
+                OriginAccessIdentity: !Sub 'origin-access-identity/cloudfront/${CloudFrontIdentity}'
+              Id: S3
+          CustomErrorResponses:
+            - ErrorCode: 404
+              ResponseCode: 200
+              ResponsePagePath: /index.html
+              ErrorCachingMinTTL: 300
+            - ErrorCode: 403
+              ResponseCode: 200
+              ResponsePagePath: /index.html
+              ErrorCachingMinTTL: 300
+
+    # the S3 bucket we will use to upload our application (the dist folder)
+    MyS3Bucket:
+      Type: AWS::S3::Bucket
+      Properties:
+        BucketName: replacewithyourbucketname
+
+    # the policy that grants access to S3 to only the cloudfront origin identity 
+    MyS3BucketPolicy:
+      Type: AWS::S3::BucketPolicy
+      Properties:
+        Bucket: !Ref MyS3Bucket
+        PolicyDocument:
+          Statement:
+            Effect: "Allow"
+            Principal:
+              AWS: !Sub "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ${CloudFrontIdentity}"
+            Action: "s3:GetObject"
+            Resource: !Join 
+              - ''
+              - - 'arn:aws:s3:::'
+                - !Ref MyS3Bucket
+                - /*
+
+  Outputs:
+    CloudFrontEndpoint:
+      Description: Endpoint for Cloudfront Distribution
+      Value: !GetAtt CloudFrontDistribution.DomainName

serverless-distribution.yml

@@ -0,0 +1,38 @@
+import 'zone.js/dist/zone-node';
+import { join } from 'path';
+import * as  fs from 'fs';
+import { renderModule, AppServerModule } from './src/main.server';
+import * as express from 'express';
+
+export const app = express();
+
+const distFolder = join(process.cwd(), 'dist/angular-lambda-ssr/browser');
+
+app.set('view engine', 'html');
+app.set('views', distFolder);
+
+// Example Express Rest API endpoints
+// app.get('/api/**', (req, res) => { });
+// Serve static files from /browser
+app.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+}));
+
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+    fs.readFile(join(__dirname, '../browser/index.html'), function (err, html) {
+        if (err) {
+            throw err;
+        }
+
+        renderModule(AppServerModule, {
+            document: html.toString(),
+            url: req.url
+        }).then((html) => {
+            res.send(html);
+        });
+    });
+
+});
+
+export * from './src/main.server';

serverless.ts

@@ -0,0 +1,55 @@
+service: angular-lambda-ssr
+
+provider:
+  name: aws
+  runtime: nodejs12.x
+  memorySize: 192
+  timeout: 10
+  region: us-east-1
+
+package:
+  exclude:
+    - ./**
+  include:
+    - "node_modules/html-minifier/**"
+    - "node_modules/commander/**"
+    - "node_modules/html-minifier/**"
+    - "node_modules/upper-case/**"
+    - "node_modules/clean-css/**"
+    - "node_modules/source-map/**"
+    - "node_modules/lower-case/**"
+    - "node_modules/no-case/**"
+    - "node_modules/he/**"
+    - "node_modules/param-case/**"
+    - "node_modules/relateurl/**"
+    - "node_modules/uglify-js/**"
+    - "node_modules/serverless-http/**"
+    - "dist/**"
+    - "lambda.js"
+
+functions:
+  ssr-origin-req:
+    handler: lambda.handler
+    role: !GetAtt LambdaEdgeFunctionRole.Arn
+
+resources:
+  Resources:
+    # the role that the lambda function will assume. Also notice the edgelambda in the principal part
+    LambdaEdgeFunctionRole:
+      Type: "AWS::IAM::Role"
+      Properties:
+          Path: "/"
+          ManagedPolicyArns:
+              - "arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole"
+          AssumeRolePolicyDocument:
+            Version: "2012-10-17"
+            Statement:
+              -
+                Sid: "AllowLambdaServiceToAssumeRole"
+                Effect: "Allow"
+                Action: 
+                  - "sts:AssumeRole"
+                Principal:
+                  Service: 
+                    - "lambda.amazonaws.com"
+                    - "edgelambda.amazonaws.com"

serverless.yml

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AnimalComponent } from './animal.component';
+
+
+const routes: Routes = [
+  {
+    path: ':id',
+    component: AnimalComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AnimalRoutingModule { }

src/app/animal/animal-routing.module.ts

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  padding: 0 20px;
+}

src/app/animal/animal.component.css

@@ -0,0 +1,15 @@
+<div *ngIf="animal">
+  <fieldset>
+    <legend>Details</legend><br />
+    <label for="name">Name:</label>
+    <span> {{ animal.name }}</span><br /><br />
+    <label for="age">Age:</label>
+    <span> {{ animal.age }}</span><br /><br />
+    <label for="address">Adders:</label>
+    <span> {{ animal.address.street }} {{ animal.address.city }} {{ animal.address.zip }}</span><br /><br />
+    <label for="charac">Characteristics:</label>
+    <ul *ngFor="let charac of animal.characteristics;">
+      <li>{{charac}}</li>
+    </ul>
+  </fieldset>
+</div>

src/app/animal/animal.component.html

@@ -0,0 +1,53 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Animal, SearchService } from '../shared';
+import { Subject } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-animal',
+  templateUrl: './animal.component.html',
+  styleUrls: ['./animal.component.css']
+})
+export class AnimalComponent implements OnInit, OnDestroy {
+  animal: Animal;
+
+  private ngUnsubscribe: Subject<void> = new Subject<void>();
+
+  constructor(private route: ActivatedRoute,
+    private router: Router,
+    private service: SearchService) {
+  }
+
+  ngOnInit(): void {
+    this.route.params.subscribe((params) => {
+      const id = + params.id; // (+) converts string 'id' to a number
+      this.service.get(id)
+        .pipe(takeUntil(this.ngUnsubscribe))
+        .subscribe(animal => {
+          if (animal) {
+            this.animal = animal;
+          } else {
+            this.gotoList();
+          }
+        });
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
+  cancel() {
+    this.router.navigate(['/search']);
+  }
+
+  gotoList() {
+    if (this.animal) {
+      this.router.navigate(['/search', { term: this.animal.name }]);
+    } else {
+      this.router.navigate(['/search']);
+    }
+  }
+}

src/app/animal/animal.component.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AnimalRoutingModule } from './animal-routing.module';
+import { AnimalComponent } from './animal.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    AnimalRoutingModule
+  ],
+  declarations: [AnimalComponent]
+})
+export class AnimalModule { }

src/app/animal/animal.module.ts

@@ -1,10 +1,22 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-const routes: Routes = [];
+import { SearchComponent } from './search/search.component';
+
+const routes: Routes = [
+  { path: 'search', component: SearchComponent },
+  {
+    path: 'animal',
+    loadChildren: () => import('./animal/animal.module').then(m => m.AnimalModule)
+  },
+  { path: '', redirectTo: '/search', pathMatch: 'full' }
+];
+
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {
+    initialNavigation: 'enabled'
+  })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app-routing.module.ts

@@ -1,16 +1,24 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { TransferHttpCacheModule } from '@nguniversal/common';
+import { HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { SearchComponent } from './search/search.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    SearchComponent
   ],
   imports: [
-    BrowserModule,
-    AppRoutingModule
+    BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    TransferHttpCacheModule,
+    AppRoutingModule,
+    FormsModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.component.html

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { ServerModule , ServerTransferStateModule} from '@angular/platform-server';
+
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+    ServerTransferStateModule
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}

src/app/app.module.ts

@@ -0,0 +1,20 @@
+:host {
+  display: block;
+  padding: 0 20px;
+}
+
+table {
+  margin-top: 10px;
+  border-collapse: collapse;
+}
+
+th {
+  text-align: left;
+  border-bottom: 2px solid #ddd;
+  padding: 8px;
+}
+
+td {
+  border-top: 1px solid #ddd;
+  padding: 8px;
+}

src/app/app.server.module.ts

@@ -0,0 +1,23 @@
+<h2>Search for a pet:</h2>
+<form>
+  <input type="search" name="query" [(ngModel)]="query" (keyup.enter)="search()">
+  <button type="button" (click)="search()">Search</button>
+</form>
+<table *ngIf="searchResults.length">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Age</th>
+      <th>Address</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let animal of searchResults; let i=index">
+      <td><a [routerLink]="['/animal', animal.id]">{{animal.name}}</a></td>
+      <td>{{animal.age}}</td>
+      <td>{{animal.address.street}}<br />
+        {{animal.address.city}} {{animal.address.zip}}
+      </td>
+    </tr>
+  </tbody>
+</table>

src/app/search/search.component.css

@@ -0,0 +1,43 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { Animal, SearchService } from '../shared';
+
+@Component({
+  selector: 'app-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.css']
+})
+export class SearchComponent implements OnInit, OnDestroy {
+  query = '';
+  searchResults: Array<Animal> = [];
+  private ngUnsubscribe: Subject<void> = new Subject<void>();
+
+  constructor(private searchService: SearchService, private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.route.params
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe(params => {
+        if (params.term) {
+          this.query = decodeURIComponent(params.term);
+          this.search();
+        }
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
+  search(): void {
+    this.searchService.search(this.query).subscribe(
+      (data: any) => { this.searchResults = data; },
+      error => console.log(error)
+    );
+  }
+
+}

src/app/search/search.component.html

@@ -0,0 +1,2 @@
+export * from './search/search.service';
+export * from './interfaces';

src/app/search/search.component.ts

@@ -0,0 +1,13 @@
+export interface Address {
+  street: string;
+  city: string;
+  zip: string;
+}
+
+export interface Animal {
+  id: number;
+  name: string;
+  age: string;
+  address: Address;
+  characteristics: [string]
+}

src/app/shared/index.ts

@@ -0,0 +1,35 @@
+import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Animal } from '../interfaces';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SearchService {
+
+  constructor(private http: HttpClient, @Inject(PLATFORM_ID) readonly platformId: Object) { }
+
+  getAll() {
+    return this.http.get('/assets/data/animals.json');
+  }
+
+  search(q: string): Observable<Animal[]> {
+    if (!q || q === '*') {
+      q = '';
+    } else {
+      q = q.toLowerCase();
+    }
+    return this.getAll().pipe(
+      map((data: Animal[]) =>
+        data
+          .filter(item => JSON.stringify(item).toLowerCase().includes(q))
+      ));
+  }
+
+  get(id: number) {
+    return this.getAll().pipe(
+      map((all: any) => all.find(e => e.id === id)));
+  }
+}

src/app/shared/interfaces.ts

@@ -0,0 +1,95 @@
+[
+    {
+        "id": 1,
+        "name": "Oliver",
+        "type": "cat",
+        "age": "12",
+        "address": {
+            "street": "2 dam",
+            "city": "Amsterdam",
+            "zip": "1012"
+        },
+        "characteristics": [
+            "friendly",
+            "playful",
+            "selfish"
+        ]
+    },
+    {
+        "id": 2,
+        "name": "Leo",
+        "type": "cat",
+        "age": "1",
+        "address": {
+            "street": "26 ",
+            "city": "Haarlem",
+            "zip": "2002"
+        },
+        "characteristics": [
+            "friendly",
+            "quite",
+            "cuddly"
+        ]
+    },
+    {
+        "id": 3,
+        "name": "Simba",
+        "type": "cat",
+        "age": "4",
+        "address": {
+            "street": "123 markt",
+            "city": "Amsterdam",
+            "zip": "1003"
+        },
+        "characteristics": [
+            "shy"
+        ]
+    },
+    {
+        "id": 4,
+        "name": "Max",
+        "type": "dog",
+        "age": "13",
+        "address": {
+            "street": "12 gracht",
+            "city": "Amsterdam",
+            "zip": "1017"
+        },
+        "characteristics": [
+            "friendly",
+            "Affectionate with Family",
+            "selfish"
+        ]
+    },
+    {
+        "id": 5,
+        "name": "Milo",
+        "type": "dog",
+        "age": "15",
+        "address": {
+            "street": "43 kade",
+            "city": "Amsterdam",
+            "zip": "1345"
+        },
+        "characteristics": [
+            "Kid-friendly",
+            "playful"
+        ]
+    },
+    {
+        "id": 6,
+        "name": "Oscar",
+        "type": "dog",
+        "age": "2",
+        "address": {
+            "street": "34 haven",
+            "city": "Amsterdam",
+            "zip": "1057"
+        },
+        "characteristics": [
+            "friendly",
+            "playful",
+            "Love to eat"
+        ]
+    }
+]

src/app/shared/search/search.service.ts

@@ -0,0 +1,10 @@
+import { enableProdMode } from '@angular/core';
+
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+export { AppServerModule } from './app/app.server.module';
+export { renderModule, renderModuleFactory } from '@angular/platform-server';

src/assets/data/animals.json

@@ -8,5 +8,7 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+document.addEventListener('DOMContentLoaded', () => {
+  platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));
+});

src/main.server.ts

@@ -5,7 +5,6 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,

src/main.ts

@@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/server",
+    "target": "es2016",
+    "types": [
+      "node"
+    ]
+  },
+  "files": [
+    "src/main.server.ts",
+    "server.ts"
+  ],
+  "angularCompilerOptions": {
+    "entryModule": "./src/app/app.server.module#AppServerModule"
+  }
+}

tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.app.json",
+    "compilerOptions": {
+      "outDir": "./out-tsc/serverless",
+      "target": "es2016",
+      "types": [
+        "node"
+      ]
+    },
+    "files": [
+      "src/main.server.ts",
+      "serverless.ts"
+    ],
+    "angularCompilerOptions": {
+      "entryModule": "./src/app/app.server.module#AppServerModule"
+    }
+  }