In this guide, we'll look at how to use @angular/fire to automatically deploy an Angular application to Firebase hosting by using the Angular CLI.

First, you need to add the @angular/fire package to your project. In your Angular CLI project run:

ng add @angular/fire

Note that the command above assumes you have global Angular CLI installed. To install Angular CLI globally run npm i -g @angular/cli.

The command above will trigger the @angular/fire ng-add schematics. The schematics will open a web browser and guide you through the Firebase authentication flow (if you're not signed in already). After you authenticate, you'll see a prompt to select a Firebase hosting project.

The schematics will do the following:

• Add @angular/fire to your list of dependencies
• Create firebase.json, .firebaserc files in the root of your workspace. You can use them to configure your firebase hosting deployment. Find more about them here
• Update your workspace file (angular.json) by inserting the deploy builder

In the end, your angular.json project will look like below:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "sample-app": {
        // ...
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {}
        }
      }
    }
    // ...
  },
  "defaultProject": "sample-app"
}

If you want to add deployment capabilities to a different project in your workspace, you can run:

ng add @angular/fire --project=[PROJECT_NAME]

As the second step, to deploy your project run:

ng run [ANGULAR_PROJECT_NAME]:deploy

The command above will trigger:

1. Production build of your application
2. Deployment of the produced assets to the firebase hosting project you selected during ng add

To customize the deployment flow, you can use the configuration files you're already familiar with from firebase-tools. You can find more in the firebase documentation.