Zanex - Angular Admin & Dashboard Template

Firebase SetUp

---

step-1: Now run below commands inside our angular 12 project to install firebase.

    npm install firebase @angular/fire --save 
                                    

step-2: Now we need to add firebase configuration details(create database on firebase) and we need to add that details in angular_project/src/environments/environment.ts file:

    export const environment = {
        production: false,
        firebaseConfig : {
          apiKey: "***",
          authDomain: "***",
          databaseURL: "***",
          projectId: "***",
          storageBucket: "***",
          messagingSenderId: "***",
          appId: "***",
          measurementId: "***"
        }
      };
                                    

And also include them in angular_project/src/environments/environment-prod.ts file:

    export const environment = {
        production: true,
        firebaseConfig : {
            apiKey: "***",
            authDomain: "***",
            databaseURL: "***",
            projectId: "***",
            storageBucket: "***",
            messagingSenderId: "***",
            appId: "***",
            measurementId: "***"
        }
    };
                                    

step-3: . Now we nee to add or replace below code into our angular_project/src/app/app.module.ts file:

    
        import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
        import { environment } from 'src/environments/environment';
        import { AngularFireModule } from '@angular/fire/compat';
        import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
        import { AngularFirestoreModule } from '@angular/fire/compat/firestore';

        imports:[
        ...
        BrowserAnimationsModule, // required animations module
        AngularFireModule.initializeApp(environment.firebaseConfig),
        AngularFireDatabaseModule,
        AngularFirestoreModule,
        ]