How to instantiate Firebase Cloud Messaging in Angular2

Question

How to instantiate Firebase Cloud Messaging in Angular2 / TypeScript / AngularFire2 ?

It's described here for JavaScript: https://firebase.google.com/docs/cloud-messaging/js/client

Answer 1

The firebase.messaging() function takes the Firebase app instance as an optional parameter.

To wire it up with AngularFire2, you could let AngularFire2 perform the app initialization and create the Firebase app instance and could then inject the app instance (into a service, for example) and pass it to firebase.messaging() like this:

import { Inject, Injectable } from "@angular/core";
import { FirebaseApp } from "angularfire2";
import * as firebase from 'firebase';

@Injectable()
export class SomeService {

    private _messaging: firebase.messaging.Messaging;

    constructor(@Inject(FirebaseApp) private _firebaseApp: firebase.app.App) {

        this._messaging = firebase.messaging(this._firebaseApp);
        this._messaging.requestPermission()
            .then(() => { ... })
            .catch((error) => { ... });
    }
}

You'll need to setup the web app manifest that's mentioned in the article you referenced. That's something with which I am unfamiliar.

Answer 2

There seems to be an import that is required:

import '@firebase/messaging';