How to use FCM(Firebase Cloud Messaging) in Cordova Angular 4 application

Question

I am creating a hybrid app using Angular 4 and Cordova as I want to target both desktop and mobile platforms with single code base. I have followed following directory structure of my project:

[1

I am developing the application in angular 4 and use to build using Angular CLI. I have hook which copy the angular build into cordova 'www' folder and then I create the apk. Issue is I want to use FCM (Firebase Cloud Messaging) in my cordova app to receive messages from server but I can't as I am developing in Angular 4 (Ref. directory structure above). Could anyone help how I can use cordova plugins with angular 4. I am open to change the directory structure if required.

Answer 1

I got the answer. 1. Just need to add the FCM plugin in cordova project by running following command: cordova plugin add cordova-plugin-fcm 2. Now in angular project do the following changes in "app.component.ts" file:

ngOnInit() {
 document.addEventListener("deviceready", onDeviceReady, false);
}

onDeviceReady() {
FCMPlugin.getToken((token) => {
        this.pushtoken = token;
        console.log('getToken:', token);
        if (!token) {
            setTimeout(this.getToken, 1000);
        }
    }, (err) => {
        console.log('error retrieving token: ' + err);
    });
}