How to initialize firebase in angular 8?

Question

I am new to firebase. https://www.npmjs.com/package/firebase. npm install in my angular8& ionic4 package for performance monitoring and analytics. some module getting error. I couldn't solve my problem.

Error:-

index.cjs.js:638 Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
at app (http://192.168.43.123:8100/vendor.js:86420:33)
at Object.serviceNamespace [as performance] (http://192.168.43.123:8100/vendor.js:86471:51)
at Module../src/app/pages/wcsm/wcsm.page.ts (http://192.168.43.123:8100/main.js:12917:69)
at __webpack_require__ (http://192.168.43.123:8100/runtime.js:85:30)
at Module../src/app/components/popup/popup.component.ts (http://192.168.43.123:8100/main.js:8795:80)
at __webpack_require__ (http://192.168.43.123:8100/runtime.js:85:30)
at Module../src/app/app.component.ts (http://192.168.43.123:8100/main.js:1284:105)
at __webpack_require__ (http://192.168.43.123:8100/runtime.js:85:30)
at Module../src/app/app.module.ts (http://192.168.43.123:8100/main.js:1808:72)
at __webpack_require__ (http://192.168.43.123:8100/runtime.js:85:30)

app.modules.ts

 import * as firebase from 'firebase/app';
 import 'firebase/analytics';
 import 'firebase/performance';
 import { firebaseConfig } from './firebase-config';
 firebase.initializeApp(firebaseConfig);
 const analytics= firebase.analytics();
 const perf = firebase.performance();

Wasim · Answer 1 · 2020-06-26T07:27:49.550

Assuming that you have already Project ready on Firebase and firebase installed in your Angular Project via npm commands

Step 1 : Create a file manifest.json in your src directory of Angular Project.

manifest.json

{
    "gcm_sender_id": "SENDER_ID"  -- Put your sender Id here from firebase app
}

Step 2 : Add your manifest file link in index.html like this

index.html

<head>
    <link rel="manifest"  href="./manifest.json">
 </head>

Step 3 : Make sure you have added your manifest file in angular.json file

angular.json

    {
     "src/firebase-messaging-sw.js",  //worker file , make sure you have this in src 
      "src/manifest.json" 
    }

Step 4: Initialize firebase in app.module.ts

app.module.ts

 import * as firebase from 'firebase/app';
 var config = {
    apiKey: "", -- put values accordingly
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};
 firebase.initializeApp(config);

If you are using FireModule then make sure to add it in imports of app.module.ts

app.module.ts

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AngularFireDatabaseModule,
    AngularFireAuthModule, 
    AngularFireMessagingModule,
    AngularFireModule.initializeApp(config),
  ]

Step 5: If you are using service or pipes make sure to put them in providers

app.module.ts

 providers: [
    MessageService, AsyncPipe
  ]

Step 6: Your worker file should look like this normally named firebase-messaging-sw.js

firebase-messaging-sw.js

    --import versions according your machine
    importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js'); 
    importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js');

    var config = {
    apiKey: "", -- put values accordingly
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

firebase.initializeApp(config);

Thanks for reply. I am not using angular/fire npm. Due to build time getting unknown error. I also tried CDN method, couldn't call performance trace function. Sometimes getting analytics not a function error. I tried every possible way I couldn't figure out. — Vijayakumar.V, Jun 26 '20 at 08:04
did you checked this ? https://stackoverflow.com/questions/40563140/error-no-firebase-app-default-has-been-created-call-firebase-app-initiali — Wasim, Jun 26 '20 at 08:07
Yes, already tried. but same error. Popup component included module not working. — Vijayakumar.V, Jun 26 '20 at 08:13
Did you add pop up component name in entry points array of relevant module ? — Wasim, Jun 26 '20 at 08:19
If you are treating it as a Pop up Modal then you should add component name in entry points array — Wasim, Jun 26 '20 at 08:21
I have added entryComponents[]. Main problem is firebase initialization — Vijayakumar.V, Jun 26 '20 at 08:49

How to initialize firebase in angular 8?

1 Answers1