Create and configure angular standalone app with firebase emulators

create_configure_angular_standalone_with_firebase_emualtor.md

Create and configure angular standalone app with firebase emulators

Create Angular Standalone App

Create angular standalone app by using command npx @angular/cli@latest new <APP_NAME> --standalone --routing --style=scss

Generate and Update enviroment files

• Generate environment file for production and devlopment by using command ng g environments
  • It will generate two file environment.ts and environment.development.ts under src/environments/
  • It will update amgular.json file for replacing environment.ts with environment.development.ts for dev version
• Update environments to below

src/environments/environment.ts

// Production configurations
export const environment = {
  production: true,
  useEmulators: false, // do not use emulators in production build
};

src/environments/environment.development.ts

// Development configurations
export const environment = {
  production: false,
  useEmulators: true, // do not use emulators in production build
};

Install firebase-tools

Install firebase tools globally using npm install -g firebase-tools@latest

Login to firebase

Login to firebase using command firebase login

Add @angular/fire

• Install and add angularfire using command ng add @angular/fire@latest
• Follow the instruction shown on terminal

Init the firebase for emulators

• Initialize firebase using firebase tools using command firebase init
• Follow the instruction shown on terminal

Update app.config.ts

Update app.config.ts (src/app/app.config.ts) to

import { ApplicationConfig, importProvidersFrom } from "@angular/core";
import { provideRouter } from "@angular/router";
import { appRoutes } from "./app.routes";
import { provideAnimations } from "@angular/platform-browser/animations";
import {
    provideAnalytics, getAnalytics, ScreenTrackingService,
    UserTrackingService
} from "@angular/fire/analytics";
import { provideFirebaseApp, initializeApp, getApp } from "@angular/fire/app";
import {
    provideAuth, initializeAuth, browserSessionPersistence,
    indexedDBLocalPersistence, browserPopupRedirectResolver,
    connectAuthEmulator
} from "@angular/fire/auth";
import { provideFirestore, initializeFirestore, connectFirestoreEmulator } from "@angular/fire/firestore";
import { provideFunctions, getFunctions, connectFunctionsEmulator } from "@angular/fire/functions";
import { provideMessaging, getMessaging } from "@angular/fire/messaging";
import { providePerformance, getPerformance } from "@angular/fire/performance";
import { provideStorage, getStorage, connectStorageEmulator } from "@angular/fire/storage";
import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar'; // 
import { environment } from "src/environments/environment";

const useEmulators = environment.useEmulators;

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(appRoutes),
        provideAnimations(),
        importProvidersFrom(
            provideFirebaseApp(() => initializeApp(environment.firebase)),
            provideAnalytics(() => getAnalytics()),
            provideAuth(() => {
                const auth = initializeAuth(getApp(), {
                    persistence: useEmulators
                        ? browserSessionPersistence
                        : indexedDBLocalPersistence,
                    popupRedirectResolver: browserPopupRedirectResolver
                });

                if (useEmulators) {
                    connectAuthEmulator(auth, `http://localhost:9099`, { disableWarnings: true });
                }

                return auth;
            }),
            provideFirestore(() => {
                const firestore = initializeFirestore(getApp(), {
                    experimentalForceLongPolling: useEmulators ? true : false
                });

                if (useEmulators) {
                    connectFirestoreEmulator(firestore, 'localhost', 8080)
                }

                return firestore;
            }),
            provideFunctions(() => {
                const functions = getFunctions();

                if (useEmulators) {
                    connectFunctionsEmulator(functions, 'localhost', 5001);
                }

                return functions;
            }),
            provideMessaging(() => getMessaging()), // not using emulators for messages
            providePerformance(() => getPerformance()), // not using emulators for checking app performance
            provideStorage(() => {
                const storage = getStorage();

                if (useEmulators) {
                    connectStorageEmulator(storage, 'localhost', 9199);
                }

                return storage;
            })
        ),
        ScreenTrackingService,
        UserTrackingService,
        {
            provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
            useValue: {
                horizontalPosition: 'center',
                verticalPosition: 'bottom',
                duration: 4000
            }
        }
    ]
}

Update main.ts

Update the main.ts (src/main.ts)

import { bootstrapApplication } from "@angular/platform-browser";
import { enableProdMode } from "@angular/core";

import { AppComponent } from "./app/app.component";
import { environment } from './environments/environment';
import { appConfig } from "./app/app.config";


if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));