Disclaimer: This blog post will be focused on step by step tutorial of how to deploy a Universal Angular App using Firebase Hosting. For any explanations about Angular Universal and Server Side Rendering here are some helpful resources:

You can find the source code here if you want to follow along.

Requirements

Part I: Build an angular app (browser and server versions) 🔨

1. Install global dependencies

We are going to use @angular/cli and firebase-tools in the command line to build and deploy your application.

$ npm install --global @angular/cli firebase-tools

2. Create a new angular project

Using @angular/cli we are going to create a new angular app. In this case, I will name it angular-universal-firebase.

$ ng new angular-universal-firebase$ cd angular-universal-firebase

3. Install @angular/platform-server

To build and render your universal app, we need to install @angular/platform-server.

$ npm install --save @angular/platform-server

4. Add Server Side Rendering configuration

We are basically copying the default app configuration and modifying it for the server side rendering (SSR) configuration. For the SSR configuration, we don’t need to add polyfill (since the code will run in a node server instead of a browser) and styles (since this will be added when we reference the main index.html when building the server HTML through @angular/platform-server. Also note, we added "platform": "server" which is a feature introduced in @angular/cli#v1.3.0. This will allow us to build a SSR version of your app using @angular/cli.

// .angular-cli.json{...apps: [{ /* default config */ },**{"name": "ssr","root": "src","outDir": "functions/dist-ssr","assets": ["assets", "favicon.ico"],"index": "index.html","main": "main-ssr.ts","test": "test.ts","tsconfig": "tsconfig.app-ssr.json","prefix": "app","scripts": [],"environmentSource": "environments/environment.ts","environments": {"dev": "environments/environment.ts","prod": "environments/environment.prod.ts"},"platform": "server"} **],...}

5. Create necessary files for app server version

// src/app/app.server.module.ts

import { NgModule } from '@angular/core';import { ServerModule } from '@angular/platform-server';import { AppModule } from './app.module';import { AppComponent } from './app.component';

@NgModule({imports: [ServerModule,AppModule],bootstrap: [AppComponent]})

export class AppServerModule { }

// src/main-ssr.ts

export { AppServerModule } from './app/app.server.module';

// src/tsconfig.app-ssr.json

{"extends": "../tsconfig.json","compilerOptions": {"outDir": "../out-tsc/app","baseUrl": "./","module": "commonjs","types": []},"exclude": ["test.ts","**/*.spec.ts"],"angularCompilerOptions": {"entryModule": "app/app.server.module#AppServerModule"}}

6. Include server transition in app’s browser module

Since we are sending the server version of your app to the browser before the browser version, we need to add call .withServerTransition() when adding BrowserModule in imports of the browser module of the app.

// src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';

const APP_ID = 'angular-universal-firebase';

@NgModule({declarations: [AppComponent],imports: [BrowserModule.withServerTransition({ appId: APP_ID })],providers: [],bootstrap: [AppComponent]})

export class AppModule { }

Now we are ready to build the server and browser versions of the app!

7. Build browser and server versions of the app

Using the @angular/cli, we will build the two versions of the app.• ng build -prod : will build the browser version with prod configurations (i.e. minified html/js/css, aot, etc.)• ng build -aot -app ssr : will build the server version. It will generate an ngFactory file that we can use to render the app in node.

$ ng build -prod$ ng build -aot -app ssr

When both builds are finished, you should now have a dist folder in your root directory and dist-ssr inside your functions directory. Hooray! 🎉

Part II: Deploying with Firebase 🚀

[1] Before continuing, you should have had created a firebase project here. I named mine _angular-universal-firebase_ for this case.

1. Log in to `firebase` in the command line

Log in to firebase in the command line with the same google account you used to create your firebase project in [1].

$ firebase login

2. Initialize Firebase in the `angular` project

Initialize firebase configurations through the command line:

$ firebase init

Firebase setup configuration

3. Add package dependencies to `functions`

Since we are using a node server through firebase-functions, We need to include angular dependencies in functions/package.json to render the server version of the app.

Aside: Right now, I don’t know any way to mitigate this duplication of dependency declaration since as far as I know, you can’t access files outside the _functions_ directory in any _firebase-functions_ javascript files. But if you know a way, please let me know!

// functions/package.json{"name": "functions","description": "Cloud Functions for Firebase","dependencies": {"@angular/animations": "^4.3.5","@angular/common": "^4.3.5","@angular/compiler": "^4.3.5","@angular/core": "^4.3.5","@angular/forms": "^4.3.5","@angular/http": "^4.3.5","@angular/platform-browser": "^4.3.5","@angular/platform-server": "^4.3.5","express": "^4.15.4","firebase-admin": "~4.2.1","firebase-functions": "^0.5.7","rxjs": "^5.4.3","zone.js": "^0.8.16"},"private": true}

4. Install packages in `functions` directory

Install da dependencies!

# in project root$ npm --prefix functions install

or

# in `functions` directory$ npm install

5. Copy `dist` folder to `functions/dist`

Since you cannot access files outside of the functions directory in firebase-functions, we have to copy the dist directory inside the functions directory so we can access it in firebase-functions.

dist should now exist in root folder AND functions folder

6. Create Firebase function to serve the app

We’re going to use functions.https.onRequest Firebase function type to send the response from an express server. There are a lot of things going on in this file but the most notable are:

// functions/index.js

require('zone.js/dist/zone-node');

const functions = require('firebase-functions');const express = require('express');const path = require('path');const { enableProdMode } = require('@angular/core');const { renderModuleFactory } = require('@angular/platform-server');

const { AppServerModuleNgFactory } = require('./dist-ssr/main.bundle');

enableProdMode();

const index = require('fs').readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf8').toString();

let app = express();

app.get('**', function(req, res) {renderModuleFactory(AppServerModuleNgFactory, {url: req.path,document: index}).then(html => res.status(200).send(html));});

exports.ssr = functions.https.onRequest(app);

7. Configure Firebase hosting

Now that we have built the function to render pages, we need to change the firebase hosting configuration to use this function. We also need to change the public directory to use the dist directory to access your assets.

// firebase.json{

"hosting": {  
    **"public": "dist",  
    "rewrites": \[{  
        "source": "\*\*",  
        "function": "ssr"  
    }\]**  
}

}

8. Delete `dist/index.html` from root directory

$ rm dist/index.html

9. Deploy to Firebase 🚀 🔥

If all things went well, you should be able to deploy your app to Firebase:

$ firebase deploy

That’s it! 👍

You can check out the source code here.

I hope this tutorial was helpful in some way! I would love to hear any feedback or questions if you have any!

Other helpful resources • Creating an Angular Universal app with the Angular CLI• Angular Universal with Firebase Dynamic Hosting (Only one route handling)