├── .angular-cli.json
├── .editorconfig
├── .gitignore
├── README.md
├── e2e
    ├── app.e2e-spec.ts
    ├── app.po.ts
    └── tsconfig.e2e.json
├── firebase.json
├── functions
    ├── index.js
    ├── package-lock.json
    └── package.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── precache-config.js
├── protractor.conf.js
├── src
    ├── app
    │   ├── about-page
    │   │   ├── about-page.component.html
    │   │   ├── about-page.component.sass
    │   │   └── about-page.component.ts
    │   ├── app-routing.module.ts
    │   ├── app.component.html
    │   ├── app.component.sass
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── contact-page
    │   │   ├── contact-page.component.html
    │   │   ├── contact-page.component.sass
    │   │   └── contact-page.component.ts
    │   ├── firebase-demo
    │   │   ├── firebase-demo.component.html
    │   │   ├── firebase-demo.component.sass
    │   │   └── firebase-demo.component.ts
    │   ├── home-page
    │   │   ├── home-page.component.html
    │   │   ├── home-page.component.sass
    │   │   └── home-page.component.ts
    │   └── seo.service.ts
    ├── assets
    │   ├── .gitkeep
    │   ├── camel.jpeg
    │   ├── dog.jpeg
    │   └── meerkat.jpeg
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── manifest.json
    ├── polyfills.ts
    ├── styles.sass
    ├── test.ts
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    └── typings.d.ts
├── tsconfig.json
└── tslint.json


/.angular-cli.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 3 |   "project": {
 4 |     "name": "base"
 5 |   },
 6 |   "apps": [
 7 |     {
 8 |       "root": "src",
 9 |       "outDir": "dist",
10 |       "assets": [
11 |         "assets",
12 |         "favicon.ico",
13 |         "manifest.json",
14 |         "service-worker.js"
15 |       ],
16 |       "index": "index.html",
17 |       "main": "main.ts",
18 |       "polyfills": "polyfills.ts",
19 |       "test": "test.ts",
20 |       "tsconfig": "tsconfig.app.json",
21 |       "testTsconfig": "tsconfig.spec.json",
22 |       "prefix": "",
23 |       "serviceWorker": false,
24 |       "styles": [
25 |         "styles.sass"
26 |       ],
27 |       "scripts": [],
28 |       "environmentSource": "environments/environment.ts",
29 |       "environments": {
30 |         "dev": "environments/environment.ts",
31 |         "prod": "environments/environment.prod.ts"
32 |       }
33 |     }
34 |   ],
35 |   "e2e": {
36 |     "protractor": {
37 |       "config": "./protractor.conf.js"
38 |     }
39 |   },
40 |   "lint": [
41 |     {
42 |       "project": "src/tsconfig.app.json",
43 |       "exclude": "**/node_modules/**"
44 |     },
45 |     {
46 |       "project": "src/tsconfig.spec.json",
47 |       "exclude": "**/node_modules/**"
48 |     },
49 |     {
50 |       "project": "e2e/tsconfig.e2e.json",
51 |       "exclude": "**/node_modules/**"
52 |     }
53 |   ],
54 |   "test": {
55 |     "karma": {
56 |       "config": "./karma.conf.js"
57 |     }
58 |   },
59 |   "defaults": {
60 |     "styleExt": "sass",
61 |     "class": {
62 |       "spec": false
63 |     },
64 |     "component": {
65 |       "spec": false
66 |     },
67 |     "directive": {
68 |       "spec": false
69 |     },
70 |     "guard": {
71 |       "spec": false
72 |     },
73 |     "module": {
74 |       "spec": false
75 |     },
76 |     "pipe": {
77 |       "spec": false
78 |     },
79 |     "service": {
80 |       "spec": false
81 |     }
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # /src/environments/environment.prod.ts
 4 | # /src/environments/environment.ts
 5 | NOTES.md
 6 | functions/node_modules
 7 | server/node_modules
 8 | .firebaserc
 9 | server
10 | 
11 | /src/env.ts
12 | 
13 | # compiled output
14 | /dist
15 | /tmp
16 | /out-tsc
17 | 
18 | # dependencies
19 | /node_modules
20 | 
21 | # IDEs and editors
22 | /.idea
23 | .project
24 | .classpath
25 | .c9/
26 | *.launch
27 | .settings/
28 | *.sublime-workspace
29 | 
30 | # IDE - VSCode
31 | .vscode/*
32 | !.vscode/settings.json
33 | !.vscode/tasks.json
34 | !.vscode/launch.json
35 | !.vscode/extensions.json
36 | 
37 | # misc
38 | /.sass-cache
39 | /connect.lock
40 | /coverage
41 | /libpeerconnection.log
42 | npm-debug.log
43 | testem.log
44 | /typings
45 | 
46 | # e2e
47 | /e2e/*.js
48 | /e2e/*.map
49 | 
50 | # System Files
51 | .DS_Store
52 | Thumbs.db
53 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![Slack](https://firebasestorage.googleapis.com/v0/b/firestarter-96e46.appspot.com/o/assets%2Fslack-badge.svg?alt=media&token=3e68acef-3e00-4925-9710-e11cee5923e4)](https://join.slack.com/angularfirebase/shared_invite/MjA2NTgxMTI0MTk2LTE0OTg4NTQ4MDAtMjhhZDIzMjc0Mg)
 2 | 
 3 | [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
 4 | 
 5 | # Episode 66 - SEO with Angular 5 and Rendertron
 6 | 
 7 | Watch the video screencast [Angular SEO with Rendertron](https://angularfirebase.com/lessons/seo-angular-part-1-rendertron-meta-tags/).
 8 | 
 9 | It's real, try the [Live demo](https://instafire-app.firebaseapp.com/)
10 | 
11 | ## Usage
12 | 
13 | - `git clone`
14 | - add your firebase config to the `src/enviornments/environment.ts` file 
15 | - `npm install`
16 | 
17 | ## Production Deployment
18 | 
19 | - Deploy your own instance of Google Chrome [Rendertron](https://github.com/GoogleChrome/rendertron)
20 | - Configure middleware to handle requests.
21 | - Read the full article and ask me questions on Slack
22 | 
23 | 
24 | 


--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('base App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "jasminewd2",
11 |       "node"
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "hosting": {
 3 |       "public": "dist",
 4 |       "rewrites": [
 5 |         {
 6 |           "source": "**",
 7 |           "function": "app"
 8 |         }
 9 |       ]
10 |     }
11 |   }


--------------------------------------------------------------------------------
/functions/index.js:
--------------------------------------------------------------------------------
  1 | const functions = require('firebase-functions');
  2 | const express = require('express');
  3 | const fetch = require('node-fetch');
  4 | const url = require('url');
  5 | const app = express();
  6 | 
  7 | 
  8 | // You might instead set these as environment varibles
  9 | // I just want to make this example explicitly clear
 10 | const appUrl = 'instafire-app.firebaseapp.com';
 11 | // const renderUrl = 'https://render-tron.appspot.com/render';
 12 | const renderUrl = 'https://instafire-app.appspot.com/render';
 13 | 
 14 | 
 15 | // Generates the URL 
 16 | function generateUrl(request) {
 17 |   return url.format({
 18 |     protocol: request.protocol,
 19 |     host: appUrl, 
 20 |     pathname: request.originalUrl
 21 |   });
 22 | }
 23 | 
 24 | function detectBot(userAgent) {
 25 |   // List of bots to target, add more if you'd like
 26 | 
 27 |   const bots = [
 28 |     // crawler bots
 29 |     'googlebot',
 30 |     'bingbot',
 31 |     'yandexbot',
 32 |     'duckduckbot',
 33 |     'slurp',
 34 |     // link bots
 35 |     'twitterbot',
 36 |     'facebookexternalhit',
 37 |     'linkedinbot',
 38 |     'embedly',
 39 |     'baiduspider',
 40 |     'pinterest',
 41 |     'slackbot',
 42 |     'vkShare',
 43 |     'facebot',
 44 |     'outbrain',
 45 |     'W3C_Validator'
 46 |   ]
 47 | 
 48 |   const agent = userAgent.toLowerCase()
 49 | 
 50 |   for (const bot of bots) {
 51 |     if (agent.indexOf(bot) > -1) {
 52 |       console.log('bot detected', bot, agent)
 53 |       return true
 54 |     }
 55 |   }
 56 | 
 57 |   console.log('no bots found')
 58 |   return false
 59 | 
 60 | }
 61 | 
 62 | 
 63 | app.get('*', (req, res) => {
 64 | 
 65 | 
 66 |   const isBot = detectBot(req.headers['user-agent']);
 67 | 
 68 |   
 69 |   if (isBot) {
 70 | 
 71 |     const botUrl = generateUrl(req);
 72 |     // If Bot, fetch url via rendertron
 73 | 
 74 |     fetch(`${renderUrl}/${botUrl}`)
 75 |       .then(res => res.text() )
 76 |       .then(body => {
 77 | 
 78 |         // Set the Vary header to cache the user agent, based on code from:
 79 |         // https://github.com/justinribeiro/pwa-firebase-functions-botrender
 80 |         res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
 81 |         res.set('Vary', 'User-Agent');
 82 |         
 83 |         res.send(body.toString())
 84 |       
 85 |     });
 86 | 
 87 |   } else {
 88 | 
 89 |     
 90 |     // Not a bot, fetch the regular Angular app
 91 |     // Possibly faster to serve directly from from the functions directory? 
 92 |     fetch(`https://${appUrl}`)
 93 |       .then(res => res.text())
 94 |       .then(body => {
 95 |         res.send(body.toString());
 96 |       })
 97 |   }
 98 |   
 99 | });
100 | 
101 | exports.app = functions.https.onRequest(app);


--------------------------------------------------------------------------------
/functions/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "functions",
 3 |   "description": "Cloud Functions for Firebase",
 4 |   "scripts": {
 5 |     "serve": "firebase serve --only functions",
 6 |     "shell": "firebase experimental:functions:shell",
 7 |     "start": "npm run shell",
 8 |     "deploy": "firebase deploy --only functions",
 9 |     "logs": "firebase functions:log"
10 |   },
11 |   "dependencies": {
12 |     "express": "^4.16.2",
13 |     "firebase-admin": "~5.4.2",
14 |     "firebase-functions": "^0.7.1",
15 |     "node-fetch": "^1.7.3"
16 |   },
17 |   "private": true
18 | }
19 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular/cli'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular/cli/plugins/karma')
14 |     ],
15 |     client:{
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       reports: [ 'html', 'lcovonly' ],
20 |       fixWebpackSourcePaths: true
21 |     },
22 |     angularCli: {
23 |       environment: 'dev'
24 |     },
25 |     reporters: ['progress', 'kjhtml'],
26 |     port: 9876,
27 |     colors: true,
28 |     logLevel: config.LOG_INFO,
29 |     autoWatch: true,
30 |     browsers: ['Chrome'],
31 |     singleRun: false
32 |   });
33 | };
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "base",
 3 |   "version": "0.0.0",
 4 |   "license": "MIT",
 5 |   "scripts": {
 6 |     "ng": "ng",
 7 |     "start": "ng serve",
 8 |     "build": "ng build",
 9 |     "test": "ng test",
10 |     "lint": "ng lint",
11 |     "e2e": "ng e2e",
12 |     "pwa": "ng build --prod && sw-precache --root=dist --config=precache-config.js"
13 |   },
14 |   "private": true,
15 |   "dependencies": {
16 |     "@angular/animations": "^5.0.0",
17 |     "@angular/common": "^5.0.0",
18 |     "@angular/compiler": "^5.0.0",
19 |     "@angular/core": "^5.0.0",
20 |     "@angular/forms": "^5.0.0",
21 |     "@angular/http": "^5.0.0",
22 |     "@angular/platform-browser": "^5.0.0",
23 |     "@angular/platform-browser-dynamic": "^5.0.0",
24 |     "@angular/platform-server": "^5.0.0",
25 |     "@angular/router": "^5.0.0",
26 |     "@angular/service-worker": "^5.0.0",
27 |     "angularfire2": "^5.0.0-rc.3",
28 |     "core-js": "^2.4.1",
29 |     "firebase": "^4.6.0",
30 |     "renderer": "^0.1.5",
31 |     "rendertron": "^1.1.0",
32 |     "rxjs": "^5.5.2",
33 |     "semver": "^5.4.1",
34 |     "zone.js": "^0.8.14"
35 |   },
36 |   "devDependencies": {
37 |     "@angular/cli": "^1.5.0",
38 |     "@angular/compiler-cli": "^5.0.0",
39 |     "@angular/language-service": "^4.2.4",
40 |     "@types/jasmine": "~2.5.53",
41 |     "@types/jasminewd2": "~2.0.2",
42 |     "@types/node": "~6.0.60",
43 |     "codelyzer": "~3.2.0",
44 |     "jasmine-core": "~2.6.2",
45 |     "jasmine-spec-reporter": "~4.1.0",
46 |     "karma": "~1.7.0",
47 |     "karma-chrome-launcher": "~2.1.1",
48 |     "karma-cli": "~1.0.1",
49 |     "karma-coverage-istanbul-reporter": "^1.2.1",
50 |     "karma-jasmine": "~1.1.0",
51 |     "karma-jasmine-html-reporter": "^0.2.2",
52 |     "protractor": "~5.1.2",
53 |     "sw-precache-webpack-plugin": "^0.11.4",
54 |     "ts-node": "~3.2.0",
55 |     "tslint": "~5.7.0",
56 |     "typescript": "^2.4.2"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/precache-config.js:
--------------------------------------------------------------------------------
 1 | var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 2 | module.exports = {
 3 |     navigateFallback: '/index.html',
 4 |     navigateFallbackWhitelist: [/^(?!\/__)/], // <-- necessary for Firebase OAuth
 5 |     stripPrefix: 'dist',
 6 |     root: 'dist/',
 7 |     plugins: [
 8 |         new SWPrecacheWebpackPlugin({
 9 |           cacheId: 'firestarter',
10 |           filename: 'service-worker.js',
11 |           staticFileGlobs: [
12 |             'dist/index.html',
13 |             'dist/**.js',
14 |             'dist/**.css'
15 |           ],
16 |           stripPrefix: 'dist/assets/',
17 |           mergeStaticsConfig: true // if you don't set this to true, you won't see any webpack-emitted assets in your serviceworker config
18 |         }),
19 |       ]
20 |   };


--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './e2e/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: 'e2e/tsconfig.e2e.json'
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };
29 | 


--------------------------------------------------------------------------------
/src/app/about-page/about-page.component.html:
--------------------------------------------------------------------------------
1 | <p>
2 |   Try to fetch this url as a bot (facebook, twitter, slack, etc) <code>https://instafire-app.firebaseapp.com/about-page</code>
3 | </p>
4 | 
5 | 
6 | <img src="/assets/dog.jpeg" width="500px">


--------------------------------------------------------------------------------
/src/app/about-page/about-page.component.sass:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/E66-Angular-SEO-Rendertron/e7373822da37368f9db48f5b1855cf4fe557bc3a/src/app/about-page/about-page.component.sass


--------------------------------------------------------------------------------
/src/app/about-page/about-page.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { SeoService } from '../seo.service';
 3 | 
 4 | @Component({
 5 |   selector: 'about-page',
 6 |   templateUrl: './about-page.component.html',
 7 |   styleUrls: ['./about-page.component.sass']
 8 | })
 9 | export class AboutPageComponent implements OnInit {
10 | 
11 |   constructor(private seo: SeoService) { }
12 | 
13 |   ngOnInit() {
14 |     this.seo.generateTags({
15 |       title: 'About Page', 
16 |       description: 'This is my about page - did I mention that its link bot friendly?', 
17 |       image: 'https://instafire-app.firebaseapp.com/assets/dog.jpeg',
18 |       slug: 'about-page'
19 |     })
20 |   }
21 | 
22 | }
23 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | 
 4 | import { HomePageComponent } from './home-page/home-page.component';
 5 | import { AboutPageComponent } from './about-page/about-page.component';
 6 | import { ContactPageComponent } from './contact-page/contact-page.component'; 
 7 | import { FirebaseDemoComponent } from './firebase-demo/firebase-demo.component'; 
 8 | 
 9 | const routes: Routes = [
10 |   { path: '', component: HomePageComponent, },
11 |   { path: 'about-page', component: AboutPageComponent, },
12 |   { path: 'contact-page', component: ContactPageComponent, },
13 |   { path: 'firebase-page', component: FirebaseDemoComponent, }
14 | ];
15 | 
16 | @NgModule({
17 |   imports: [RouterModule.forRoot(routes)],
18 |   exports: [RouterModule]
19 | })
20 | export class AppRoutingModule { }
21 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <div class="content">
 2 | 
 3 |     <h1>Search Engine Optimized Bot-Friendly Angular 5</h1>
 4 | 
 5 |     <ol>
 6 |         <li>Yes, you read that right.</li>
 7 |         <li>Don't believe me? Navigate to one of the links below then paste the url into the <a href="https://cards-dev.twitter.com/validator">twitter card validator</a>.</li> 
 8 |         <li>Now learn how to make your own at <a href="https://angularfirebase.com/lessons/seo-angular-part-1-rendertron-meta-tags/">Angular Firebase</a>.</li> 
 9 |     </ol>
10 | 
11 |     <h3>Made possible by...</h3>
12 |     <ul>
13 |         <li>Rendertron (Headless Chrome)</li>
14 |         <li>Firebase Cloud Functions</li>
15 |     </ul>
16 | 
17 |     <p>Does NOT require Angular Universal</p>
18 | 
19 |     <hr>
20 | 
21 |     <a routerLink="/" class="button is-info">Home</a> 
22 |     <a routerLink="/about-page" class="button is-info">About</a>
23 |     <a routerLink="/contact-page" class="button is-info">Contact</a> 
24 | 
25 |     <a routerLink="/firebase-page" class="button is-warning">Firebase Demo</a>
26 | 
27 |     <hr>
28 | 
29 | 
30 |     <router-outlet></router-outlet>
31 | 
32 | </div>
33 | 


--------------------------------------------------------------------------------
/src/app/app.component.sass:
--------------------------------------------------------------------------------
1 | .content 
2 |     padding: 5vh 10vw


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Observable } from 'rxjs/Observable';
 3 | 
 4 | @Component({
 5 |   selector: 'app-root',
 6 |   templateUrl: './app.component.html',
 7 |   styleUrls: ['./app.component.sass']
 8 | })
 9 | export class AppComponent implements OnInit {
10 | 
11 | 
12 |   constructor() { }
13 | 
14 |   ngOnInit() { }
15 | 
16 | 
17 | }


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | 
 4 | import { AppRoutingModule } from './app-routing.module';
 5 | import { AppComponent } from './app.component';
 6 | 
 7 | import { AngularFireModule } from 'angularfire2';
 8 | import { environment } from '../environments/environment';
 9 | 
10 | 
11 | import { AngularFireDatabaseModule } from 'angularfire2/database';
12 | 
13 | 
14 | /// DELETE firebaseConfig
15 | /// Add your own firebase config to environment.ts
16 | /// Then use it to initialize angularfire2 AngularFireModule.initializeApp(environment.firebaseConfig),
17 | import { firebaseConfig } from '../env';
18 | import { HomePageComponent } from './home-page/home-page.component';
19 | import { AboutPageComponent } from './about-page/about-page.component';
20 | import { ContactPageComponent } from './contact-page/contact-page.component';
21 | import { FirebaseDemoComponent } from './firebase-demo/firebase-demo.component'; 
22 | 
23 | import { SeoService } from './seo.service';
24 | 
25 | @NgModule({
26 |   declarations: [
27 |     AppComponent,
28 |     HomePageComponent,
29 |     AboutPageComponent,
30 |     ContactPageComponent,
31 |     FirebaseDemoComponent
32 |   ],
33 |   imports: [
34 |     BrowserModule,
35 |     AppRoutingModule,
36 |     AngularFireModule.initializeApp(firebaseConfig),
37 |     AngularFireDatabaseModule
38 |   ],
39 |   providers: [SeoService],
40 |   bootstrap: [AppComponent]
41 | })
42 | export class AppModule { }
43 | 


--------------------------------------------------------------------------------
/src/app/contact-page/contact-page.component.html:
--------------------------------------------------------------------------------
1 | <p>
2 |     Try to fetch this url as a bot (facebook, twitter, slack, etc) <code>https://instafire-app.firebaseapp.com/contact-page</code>
3 | </p>
4 | 
5 | <img src="/assets/meerkat.jpeg" width="500px">


--------------------------------------------------------------------------------
/src/app/contact-page/contact-page.component.sass:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/E66-Angular-SEO-Rendertron/e7373822da37368f9db48f5b1855cf4fe557bc3a/src/app/contact-page/contact-page.component.sass


--------------------------------------------------------------------------------
/src/app/contact-page/contact-page.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { SeoService } from '../seo.service';
 3 | 
 4 | @Component({
 5 |   selector: 'contact-page',
 6 |   templateUrl: './contact-page.component.html',
 7 |   styleUrls: ['./contact-page.component.sass'],
 8 | })
 9 | export class ContactPageComponent implements OnInit {
10 | 
11 |   constructor(private seo: SeoService) { }
12 | 
13 |   ngOnInit() {
14 |     
15 |     this.seo.generateTags({
16 |       title: 'Contact Page', 
17 |       description: 'Contact me through this awesome search engine optimized Angular component', 
18 |       image: 'https://instafire-app.firebaseapp.com/assets/meerkat.jpeg',
19 |       slug: 'contact-page'
20 |     })
21 |   }
22 | 
23 | }
24 | 


--------------------------------------------------------------------------------
/src/app/firebase-demo/firebase-demo.component.html:
--------------------------------------------------------------------------------
 1 | <p>
 2 |     Try to fetch this url as a bot (facebook, twitter, slack, etc) <code>https://instafire-app.firebaseapp.com/firebase-demo</code>
 3 | </p>
 4 | 
 5 | <div *ngIf="data$ | async as data">
 6 | 
 7 |   <h1>{{ data.title }}</h1>
 8 |   <p>{{ data.description }}</p>
 9 | 
10 |   <img [src]="data.image" width="500px">
11 |   
12 | </div>


--------------------------------------------------------------------------------
/src/app/firebase-demo/firebase-demo.component.sass:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/E66-Angular-SEO-Rendertron/e7373822da37368f9db48f5b1855cf4fe557bc3a/src/app/firebase-demo/firebase-demo.component.sass


--------------------------------------------------------------------------------
/src/app/firebase-demo/firebase-demo.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { SeoService } from '../seo.service';
 3 | import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
 4 | import { Observable } from 'rxjs/Observable';
 5 | import 'rxjs/add/operator/take';
 6 | 
 7 | @Component({
 8 |   selector: 'firebase-demo',
 9 |   templateUrl: './firebase-demo.component.html',
10 |   styleUrls: ['./firebase-demo.component.sass']
11 | })
12 | export class FirebaseDemoComponent implements OnInit {
13 | 
14 |   ref: AngularFireObject<any>;
15 |   data$: Observable<any>;
16 | 
17 |   constructor(private seo: SeoService, private db: AngularFireDatabase) { }
18 | 
19 |   ngOnInit() {
20 |     const ref = this.db.object('demo')
21 |     this.data$ = ref.valueChanges()
22 | 
23 |     this.data$.take(1).subscribe(data => {
24 |       this.seo.generateTags({
25 |         title: data.title, 
26 |         description: data.description, 
27 |         image: data.image, 
28 |         slug: 'firebase-page'
29 |       })
30 |     })
31 | 
32 | 
33 |   }
34 | 
35 | }
36 | 


--------------------------------------------------------------------------------
/src/app/home-page/home-page.component.html:
--------------------------------------------------------------------------------
1 | <p>
2 |     Try to fetch this url as a bot (facebook, twitter, slack, etc) <code>https://instafire-app.firebaseapp.com</code>
3 | </p>
4 | 
5 | <img src="/assets/camel.jpeg" width="500px">


--------------------------------------------------------------------------------
/src/app/home-page/home-page.component.sass:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/E66-Angular-SEO-Rendertron/e7373822da37368f9db48f5b1855cf4fe557bc3a/src/app/home-page/home-page.component.sass


--------------------------------------------------------------------------------
/src/app/home-page/home-page.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { SeoService } from '../seo.service';
 3 | 
 4 | 
 5 | @Component({
 6 |   selector: 'home-page',
 7 |   templateUrl: './home-page.component.html',
 8 |   styleUrls: ['./home-page.component.sass'],
 9 | })
10 | export class HomePageComponent implements OnInit {
11 | 
12 |   constructor(private seo: SeoService) { }
13 | 
14 |   ngOnInit() {
15 |     this.seo.generateTags({
16 |       title: 'Home Page', 
17 |       description: 'My SEO friendly home page in Angular 5', 
18 |       image: 'https://instafire-app.firebaseapp.com/assets/camel.jpeg'
19 |     })
20 |   }
21 | 
22 | }
23 | 


--------------------------------------------------------------------------------
/src/app/seo.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { Meta } from '@angular/platform-browser';
 3 | 
 4 | @Injectable()
 5 | export class SeoService {
 6 | 
 7 |   constructor(private meta: Meta) { }
 8 | 
 9 |   generateTags(config) {
10 |     config = { 
11 |       title: 'Something', 
12 |       description: 'My SEO friendly Angular Component', 
13 |       image: 'https://angularfirebase.com/images/logo.png',
14 |       slug: '',
15 |       ...config
16 |     }
17 | 
18 |     this.meta.updateTag({ name: 'twitter:card', content: 'summary' });
19 |     this.meta.updateTag({ name: 'twitter:site', content: '@angularfirebase' });
20 |     this.meta.updateTag({ name: 'twitter:title', content: config.title });
21 |     this.meta.updateTag({ name: 'twitter:description', content: config.description });
22 |     this.meta.updateTag({ name: 'twitter:image', content: config.image });
23 | 
24 |     this.meta.updateTag({ property: 'og:type', content: 'article' });
25 |     this.meta.updateTag({ property: 'og:site_name', content: 'AngularFirebase' });
26 |     this.meta.updateTag({ property: 'og:title', content: config.title });
27 |     this.meta.updateTag({ property: 'og:description', content: config.description });
28 |     this.meta.updateTag({ property: 'og:image', content: config.image });
29 |     this.meta.updateTag({ property: 'og:url', content: `https://instafire-app.firebaseapp.com/${config.slug}` });
30 |   }
31 | 
32 | }
33 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/E66-Angular-SEO-Rendertron/e7373822da37368f9db48f5b1855cf4fe557bc3a/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/assets/camel.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/E66-Angular-SEO-Rendertron/e7373822da37368f9db48f5b1855cf4fe557bc3a/src/assets/camel.jpeg


--------------------------------------------------------------------------------
/src/assets/dog.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/E66-Angular-SEO-Rendertron/e7373822da37368f9db48f5b1855cf4fe557bc3a/src/assets/dog.jpeg


--------------------------------------------------------------------------------
/src/assets/meerkat.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/E66-Angular-SEO-Rendertron/e7373822da37368f9db48f5b1855cf4fe557bc3a/src/assets/meerkat.jpeg


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AngularFirebase/E66-Angular-SEO-Rendertron/e7373822da37368f9db48f5b1855cf4fe557bc3a/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Angular SEO</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.css" />
11 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
12 | 
13 |   <!-- linkbot metatags -->
14 |   <meta name="twitter:card" content="summary">
15 |   <meta name="twitter:site" content="@angularfirebase">
16 |   <meta name="twitter:title" content="Home page">
17 |   <meta name="twitter:description" content="An angular app that is actually search crawler bot friendly">
18 |   <meta name="twitter:image" content="https://instafire-app.firebaseapp.com/assets/camel.jpeg">
19 |   <meta property="og:type" content="article">
20 |   <meta property="og:site_name" content="AngularFirebase">
21 |   <meta property="og:title" content="Home Page">
22 |   <meta property="og:description" content="An angular app that is actually search crawler bot friendly">
23 |   <meta property="og:image" content="https://instafire-app.firebaseapp.com/assets/camel.jpeg">
24 |   <meta property="og:url" content="https://instafire-app.firebaseapp.com">
25 | 
26 |   <!-- pwa stuff -->
27 |   <meta name="viewport" content="width=device-width, initial-scale=1">
28 |   <meta name="mobile-web-app-capable" content="yes">
29 |   <meta name="apple-mobile-web-app-capable" content="yes">
30 |   <meta name="msapplication-starturl" content="/">
31 |   <meta name="theme-color" content="#f48c5b">
32 |   <link rel="manifest" href="/manifest.json">
33 | 
34 | 
35 | </head>
36 | <body>
37 |   <app-root></app-root>
38 | 
39 | 
40 |   <script>
41 |     if ('serviceWorker' in navigator) {
42 |       navigator.serviceWorker.register('/service-worker.js')
43 |       .then((registration) => {
44 |         console.log('SW registered');
45 |       })
46 |       .catch((err) => {
47 |         console.log('SW error', err);
48 |       });
49 |     }
50 |   </script>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |     "short_name": "FireStarter",
3 |     "name": "Angular4 + Firebase Starter App",
4 |     "start_url": "/",
5 |     "theme_color": "#f48c5b",
6 |     "background_color": "#ffffff",
7 |     "display": "standalone",
8 |     "orientation": "portrait"
9 | }


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 | 
43 | 
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 | 
48 | 
49 | /**
50 |  * Required to support Web Animations `@angular/platform-browser/animations`.
51 |  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
52 |  **/
53 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
54 | 
55 | 
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by Angular itself.
59 |  */
60 | import 'zone.js/dist/zone';  // Included with Angular CLI.
61 | 
62 | 
63 | 
64 | /***************************************************************************************************
65 |  * APPLICATION IMPORTS
66 |  */
67 | 
68 | /**
69 |  * Date, currency, decimal and percent pipes.
70 |  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
71 |  */
72 | // import 'intl';  // Run `npm install --save intl`.
73 | /**
74 |  * Need to import at least one locale-data with intl.
75 |  */
76 | // import 'intl/locale-data/jsonp/en';
77 | 


--------------------------------------------------------------------------------
/src/styles.sass:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/long-stack-trace-zone';
 4 | import 'zone.js/dist/proxy.js';
 5 | import 'zone.js/dist/sync-test';
 6 | import 'zone.js/dist/jasmine-patch';
 7 | import 'zone.js/dist/async-test';
 8 | import 'zone.js/dist/fake-async-test';
 9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 |   BrowserDynamicTestingModule,
12 |   platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 | 
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare const __karma__: any;
17 | declare const require: any;
18 | 
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 | 
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 |   BrowserDynamicTestingModule,
25 |   platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     "module": "es2015",
 7 |     "types": []
 8 |   },
 9 |   "exclude": [
10 |     "test.ts",
11 |     "**/*.spec.ts"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   },
13 |   "files": [
14 |     "test.ts"
15 |   ],
16 |   "include": [
17 |     "**/*.spec.ts",
18 |     "**/*.d.ts"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 |   id: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "target": "es5",
11 |     "typeRoots": [
12 |       "node_modules/@types"
13 |     ],
14 |     "lib": [
15 |       "es2017",
16 |       "dom"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "callable-types": true,
  7 |     "class-name": true,
  8 |     "comment-format": [
  9 |       true,
 10 |       "check-space"
 11 |     ],
 12 |     "curly": true,
 13 |     "eofline": false,
 14 |     "forin": true,
 15 |     "import-blacklist": [true, "rxjs"],
 16 |     "import-spacing": true,
 17 |     "indent": [
 18 |       true,
 19 |       "spaces"
 20 |     ],
 21 |     "interface-over-type-literal": true,
 22 |     "label-position": true,
 23 |     "max-line-length": [
 24 |       true,
 25 |       140
 26 |     ],
 27 |     "member-access": false,
 28 |     "member-ordering": [
 29 |       true,
 30 |       "static-before-instance",
 31 |       "variables-before-functions"
 32 |     ],
 33 |     "no-arg": true,
 34 |     "no-bitwise": true,
 35 |     "no-console": [
 36 |       true,
 37 |       "debug",
 38 |       "info",
 39 |       "time",
 40 |       "timeEnd",
 41 |       "trace"
 42 |     ],
 43 |     "no-construct": true,
 44 |     "no-debugger": true,
 45 |     "no-duplicate-variable": true,
 46 |     "no-empty": false,
 47 |     "no-empty-interface": true,
 48 |     "no-eval": true,
 49 |     "no-inferrable-types": [true, "ignore-params"],
 50 |     "no-shadowed-variable": true,
 51 |     "no-string-literal": false,
 52 |     "no-string-throw": true,
 53 |     "no-switch-case-fall-through": true,
 54 |     "no-trailing-whitespace": false,
 55 |     "no-unused-expression": true,
 56 |     "no-use-before-declare": true,
 57 |     "no-var-keyword": true,
 58 |     "object-literal-sort-keys": false,
 59 |     "one-line": [
 60 |       true,
 61 |       "check-open-brace",
 62 |       "check-catch",
 63 |       "check-else",
 64 |       "check-whitespace"
 65 |     ],
 66 |     "prefer-const": true,
 67 |     "quotemark": [
 68 |       true,
 69 |       "single"
 70 |     ],
 71 |     "radix": true,
 72 |     "semicolon": [
 73 |       "always"
 74 |     ],
 75 |     "triple-equals": [
 76 |       true,
 77 |       "allow-null-check"
 78 |     ],
 79 |     "typedef-whitespace": [
 80 |       true,
 81 |       {
 82 |         "call-signature": "nospace",
 83 |         "index-signature": "nospace",
 84 |         "parameter": "nospace",
 85 |         "property-declaration": "nospace",
 86 |         "variable-declaration": "nospace"
 87 |       }
 88 |     ],
 89 |     "typeof-compare": true,
 90 |     "unified-signatures": true,
 91 |     "variable-name": false,
 92 |     "whitespace": [
 93 |       true,
 94 |       "check-branch",
 95 |       "check-decl",
 96 |       "check-operator",
 97 |       "check-separator",
 98 |       "check-type"
 99 |     ],
100 | 
101 |     "directive-selector": [true, "attribute", "", "camelCase"],
102 |     "component-selector": [true, "element", "", "kebab-case"],
103 |     "use-input-property-decorator": true,
104 |     "use-output-property-decorator": true,
105 |     "use-host-property-decorator": true,
106 |     "no-input-rename": true,
107 |     "no-output-rename": true,
108 |     "use-life-cycle-interface": true,
109 |     "use-pipe-transform-interface": true,
110 |     "component-class-suffix": true,
111 |     "directive-class-suffix": true,
112 |     "no-access-missing-member": true,
113 |     "templates-use-public": true,
114 |     "invoke-injectable": true
115 |   }
116 | }
117 | 


--------------------------------------------------------------------------------