angularangular6firebase-cloud-messagingangularfireangular-service-worker
ERROR in ./node_modules/@angular/fire/messaging/messaging.js
My project use Firebase Cloud Message(FCM)
during system development, no problems were found.
But have the problem when I build to the production(ng build --prod)
Error below,
- ng version 6.1.10
- node version 10.8.0
- @angular/fire version 5.1.3
- firebase version 6.0.2
[Code]
package.json
{
"name": "ng-app",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build-prd": "ng build --prod --progress"
},
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.4",
"@agm/js-marker-clusterer": "1.0.0-beta.5",
"@angular/animations": "6.1.10",
"@angular/cdk": "6.4.7",
"@angular/common": "6.1.10",
"@angular/compiler": "6.1.10",
"@angular/core": "6.1.10",
"@angular/fire": "5.1.3",
"@angular/flex-layout": "6.0.0-beta.17",
"@angular/forms": "6.1.10",
"@angular/platform-browser": "6.1.10",
"@angular/platform-browser-dynamic": "6.1.10",
"@angular/pwa": "0.13.9",
"@angular/router": "6.1.10",
"@angular/service-worker": "6.1.10",
"@fortawesome/fontawesome-free": "5.6.0",
"@ngx-translate/core": "10.0.2",
"@ngx-translate/http-loader": "3.0.1",
"@swimlane/ngx-charts": "9.0.0",
"@swimlane/ngx-datatable": "13.1.0",
"@types/googlemaps": "3.30.11",
"@types/jquery": "2.0.50",
"@types/lodash": "4.14.121",
"angular-resize-event": "1.0.0",
"bmz-datatable-bs4": "1.0.10",
"bmz-js-utils": "1.4.0",
"bootstrap": "4.1.3",
"bootstrap-datepicker": "1.8.0",
"bootstrap-timepicker": "0.5.2",
"classlist.js": "1.1.20150312",
"core-js": "2.5.7",
"datatables.net-autofill-bs4": "2.3.3",
"datatables.net-bs4": "1.10.19",
"datatables.net-buttons-bs4": "1.5.4",
"datatables.net-colreorder-bs4": "1.5.1",
"datatables.net-fixedcolumns-bs4": "3.2.6",
"datatables.net-fixedheader-bs4": "3.1.5",
"datatables.net-keytable-bs4": "2.5.0",
"datatables.net-responsive-bs4": "2.2.3",
"datatables.net-rowgroup-bs4": "1.1.0",
"datatables.net-rowreorder-bs4": "1.2.5",
"datatables.net-scroller-bs4": "1.5.1",
"datatables.net-select-bs4": "1.3.0",
"firebase": "6.0.2",
"floatthead": "2.1.3",
"jquery": "1.12.4",
"js-marker-clusterer": "1.0.0",
"jszip": "3.1.5",
"lodash": "4.17.11",
"material-tooltip": "1.0.1",
"ng-block-ui": "2.0.0",
"ng2-google-charts": "3.5.0",
"ng5-slider": "1.1.8",
"ngx-bootstrap": "3.1.2",
"ngx-contextmenu": "5.0.3",
"ngx-mask": "7.4.2",
"ngx-treeview": "6.0.2",
"node-sass": "4.12.0",
"pdfmake": "0.1.56",
"popper.js": "1.14.5",
"query-string": "6.2.0",
"rx-polling": "1.0.1",
"rxjs": "6.2.2",
"rxjs-compat": "6.2.2",
"select2": "4.0.6-rc.1",
"select2-bootstrap-theme": "0.1.0-beta.10",
"sweetalert2": "8.5.0",
"terser": "3.14.1",
"ts-helpers": "1.1.2",
"update": "0.7.4",
"web-animations-js": "2.3.1",
"zone.js": "0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.13.9",
"@angular/cli": "6.2.7",
"@angular/compiler-cli": "6.1.10",
"@angular/language-service": "6.1.10",
"@types/jasmine": "2.8.12",
"@types/jasminewd2": "2.0.6",
"@types/node": "8.9.5",
"codelyzer": "4.3.0",
"concat": "1.0.3",
"jasmine-core": "2.99.1",
"jasmine-spec-reporter": "4.2.1",
"karma": "3.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-coverage-istanbul-reporter": "2.0.4",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.4.1",
"ts-node": "7.0.1",
"tslint": "5.11.0",
"typescript": "2.9.2"
}
}
manifest.json
{
"gcm_sender_id": "103953800507"
}
firebase-messaging-sw.js
// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.0.2/firebase-messaging.js');
// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
'messagingSenderId': '****123****'
});
// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
angular.json
"assets": [
"src/assets",
"src/i18n",
"src/favicon.ico",
"src/manifest.json",
"src/firebase-messaging-sw.js"
],
environments(environment.ts and environment.prod.ts)
export const environment = {
...
...
firebase: {
apiKey: "***O8qR*********",
authDomain: "******.firebaseapp.com",
databaseURL: "https://******.firebaseio.com",
projectId: "message-***",
storageBucket: "message-******.appspot.com",
messagingSenderId: "911******",
}
};
app.module.ts
imports: [
...
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AngularFireMessagingModule
],
messaging.service.service.ts
import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs';
import {AngularFireAuth} from '@angular/fire/auth';
import {AngularFireMessaging} from '@angular/fire/messaging';
import {take} from 'rxjs/operators';
import {AppProfileService} from '../app-profile/app-profile.service';
import {HttpClient, HttpParams} from '@angular/common/http';
import {SuccessResponse} from '../common-interface/SuccessResponse';
import {environment} from '../../../environments/environment';
@Injectable({
providedIn: 'root'
})
export class MessagingService {
serviceServerPathLocal = environment.serviceLocalUrl;
rdsServicePath = this.serviceServerPathLocal + '/api';
currentMessage = new BehaviorSubject(null);
constructor(
private angularFireAuth: AngularFireAuth,
private angularFireMessaging: AngularFireMessaging,
private appProfile: AppProfileService,
private http: HttpClient) {
this.angularFireMessaging.messaging
.subscribe(
(_messaging) => {
_messaging.onMessage = _messaging.onMessage.bind(_messaging);
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
}
)
}
/**
* update token in firebase database
*
* @param userId userId as a key
* @param token token as a value
*/
updateToken(userId, token) {
// we can change this function to request our backend service
this.angularFireAuth.authState.pipe(take(1)).subscribe(
() => {
const data = {};
data[userId] = token;
// this.angularFireDB.object('fcmTokens/').update(data)
})
}
/**
* request permission for notification from firebase cloud messaging
*
*/
requestPermission() {
this.angularFireMessaging.requestToken
.subscribe(
(token) => {
console.log(this.appProfile.userProfile);
console.log(token);
},
(err) => {
console.error('Unable to get permission to notify.', err);
}
);
}
/**
* hook method when new notification received in foreground
*/
receiveMessage() {
this.angularFireMessaging.messages
.subscribe(
(payload) => {
console.log("new message received. ", payload);
this.currentMessage.next(payload);
})
}
registerTokenFCM(fcmToken: string, plantNo: string) {
const objectParams = {
fcmToken: fcmToken,
plantNo: plantNo
};
console.log(objectParams);
const httpOptions = {
params: new HttpParams({fromObject: objectParams})
};
this.http.get<SuccessResponse<any>>(this.rdsServicePath + '/fcm/register-topics', httpOptions)
.subscribe(s => {
console.log(s);
});
}
}
Thank you so much. _/\_
Solution
I solved the problem solution below.
Look at devDependencies
I downgrade @angular-devkit/build-angular version from 0.13.9 to 0.8.9
I think @angular/fire part of firebase/messaging not compatible build by TerserPlugin
Because version 0.13.9 using build by TerserPlugin, but version 0.8.9 using build by UglifyJSPlugin
I'm not sure this is the best way but it make me able to continue to work
Everyone can recommend me.