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. _/\_
