Merge branch 'fix/2'

Author: aaronte

angular.json

@@ -11,7 +11,7 @@
  "build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
- "outputPath": "dist",
+ "outputPath": "functions/dist/browser",
  "index": "src/index.html",
  "main": "src/main.ts",
  "tsConfig": "src/tsconfig.app.json",
@@ -94,7 +94,7 @@
  "server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
- "outputPath": "functions/dist-ssr",
+ "outputPath": "functions/dist/server",
  "main": "src/main-ssr.ts",
  "tsConfig": "src/tsconfig.app-ssr.json"
  }

firebase.json

@@ -7,6 +7,10 @@
  "**/node_modules/**"
  ],
  "rewrites": [
+ {
+ "source" : "**/*.@(css|js)",
+ "destination": "/index2.html"
+ },
  {
  "source": "**",
  "function": "ssr"

functions/index.js

@@ -11,7 +11,7 @@ const { AppServerModuleNgFactory } = require('./dist/server/main');
 enableProdMode();
 
 const index = require('fs')
- .readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf8')
+ .readFileSync(path.resolve(__dirname, './dist/browser/index.html'), 'utf8')
  .toString();
 
 let app = express();

src/app/app.component.html

@@ -1,7 +1,10 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
  <h1>
- Server side rendering with Firebase 🔥
+ {{renderer}} side rendering with Firebase 🔥
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
+ <div [ngStyle]="{ 'padding-top': '32px', 'text-align': 'center' }">
+ <button (click)="openAlert()">Is browser code loaded?</button>
+ </div>
 </div>

src/app/app.component.ts

@@ -1,10 +1,25 @@
-import { Component } from '@angular/core';
+declare let window: any;
+
+import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
-export class AppComponent {
- title = 'app';
+export class AppComponent implements OnInit {
+ renderer = '';
+
+ constructor(@Inject(PLATFORM_ID) private platformId: string) {}
+
+ ngOnInit() {
+ this.renderer = isPlatformBrowser(this.platformId) ? 'Browser' : 'Server';
+ }
+
+ openAlert() {
+ if (isPlatformBrowser(this.platformId)) {
+ window.alert('Yes it is!');
+ }
+ }
 }