Angular 9 universal Firebase Deploy
2 min readApr 10, 2020
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:
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
- C:\path-to-your-project> ng add @nguniversal/express-engine — clientProject yourProjectName
- 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: