Angular 9 universal Firebase Deploy

It was a long way to get an Angular 9 universal Project deployed to Firebase. But finally it is a very easy process. Just follow these simple steps:

alexander-sinn-KgLtFCgfC28-unsplash

1. Create a firebase project

Go to the firebase console and add a new project, giving it a name, that´s all.

2. Install Angular 9 Cli

3. Create a new Angular Project

• ng new yourProjectName
• ? Would you like to add Angular routing?
  Yes
• ? Which stylesheet format would you like to use?
  SCSS (CSS should also work)

4. Change to the project folder and follow these steps

1. C:\path-to-your-project> ng add @nguniversal/express-engine — clientProject yourProjectName
2. C:\path-to-your-project>firebase init

• ? Are you ready to proceed?
  Yes
• ? Which Firebase CLI features do you want to set up for this folder?
  Functions, Hosting
• ? Please select an option
  Use an existing project
• ? Select a default Firebase project for this directory:
  Select your new created Firebase Project
• ? What language would you like to use to write Cloud Functions?
  TypeScript
• ? Do you want to use TSLint to catch probable bugs and enforce style?
  Yes
• ? Do you want to install dependencies with npm now?
  Yes
• ? What do you want to use as your public directory?
  dist
• ? Configure as a single-page app (rewrite all urls to /index.html)?
  Yes

3. C:\path-to-your-project>npm install ws xhr2 bufferutil utf-8-validate -D

4. C:\path-to-your-project>ng add @angular/fire

• ? We detected an Angular Universal project. Do you want to deploy as a Firebase Function?
  Yes

5. C:\path-to-your-project>npm i firebase@7.13.1

6. C:\path-to-your-project>ng deploy

That´s it, that´s all! I hope it could help you start a new Angular 9 universal app and deploy it to firebase. Have Fun!!!

Helping links:

Angular Universal - server-side rendering for Angular.

angular/angularfire