Firebase with Angular - Commands & Configuration

Introduction

Firebase is a platform that helps you add backend features like databases and authentication to your Angular app without managing servers. It solves the problem of building and scaling app backends easily.

When you want to add user login and registration to your Angular app quickly.

When you need a real-time database that updates your app instantly.

When you want to host your Angular app with a global content delivery network.

When you want to send push notifications to your Angular app users.

When you want to track app usage and errors without setting up complex tools.

Config File - angular.json

angular.json

{
  "$schema": "https://json.schemastore.org/angular-cli.json",
  "version": 1,
  "projects": {
    "my-angular-app": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-angular-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        }
      }
    }
  },
  "defaultProject": "my-angular-app"
}

This is the Angular workspace configuration file. It defines the build settings for your Angular app named my-angular-app. It tells Angular CLI how to build and serve your app files.

Commands

This command installs Firebase and AngularFire libraries needed to connect your Angular app with Firebase services.

Terminal

npm install firebase @angular/fire --save

Expected Output

+ firebase@9.22.1

+ @angular/fire@7.5.0

added 50 packages from 30 contributors and audited 120 packages in 5.2s



found 0 vulnerabilities

This command sets up AngularFire in your Angular project, including adding Firebase configuration and updating app modules.

Terminal

ng add @angular/fire

Expected Output

Installing packages for tooling via npm.

Installed packages for tooling via npm.



✔ Packages installed successfully.



✔ Added Firebase configuration to environment files.

✔ Added AngularFireModule to AppModule.

This command builds and runs your Angular app locally so you can test Firebase integration in your browser.

Terminal

ng serve

Expected Output

✔ Compiled successfully.



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **



Date: 2024-06-01T12:00:00.000Z - Hash: abcdef1234567890 - Time: 5000ms



✔ Browser application bundle generation complete.

This command uploads your built Angular app to Firebase Hosting so it is available on the internet.

Terminal

firebase deploy --only hosting

Expected Output

=== Deploying to 'my-angular-app'...



i  deploying hosting

i  hosting: preparing public directory 'dist/my-angular-app'

✔  hosting: files prepared for upload

i  hosting: uploading files

✔  hosting: files uploaded successfully



✔  Deploy complete!



Project Console: https://console.firebase.google.com/project/my-angular-app/overview

Hosting URL: https://my-angular-app.web.app

→

--only hosting - Deploys only the hosting part of Firebase, skipping other services.

Key Concept

If you remember nothing else from this pattern, remember: AngularFire connects your Angular app to Firebase services easily by installing libraries, configuring modules, and deploying your app.

Common Mistakes

Not installing both firebase and @angular/fire packages before setup

AngularFire depends on both packages; missing one causes errors when importing or running the app.

Always run 'npm install firebase @angular/fire --save' before adding AngularFire to your project.

Skipping the 'ng add @angular/fire' command and manually adding config

Manual setup can miss important module imports and environment updates, causing runtime errors.

Use 'ng add @angular/fire' to automate configuration and ensure all necessary changes are made.

Trying to deploy without building the Angular app first

Firebase Hosting needs the built files in the 'dist' folder; without building, deploy fails or serves empty content.

Run 'ng build --prod' or 'ng serve' to build your app before deploying.

Summary

Install Firebase and AngularFire libraries to connect Angular with Firebase.

Use 'ng add @angular/fire' to configure Firebase in your Angular app automatically.

Run 'ng serve' to test locally and 'firebase deploy --only hosting' to publish your app online.