./node_modules/@angular/fire/messaging/messaging.js 中的错误

Question

我的项目使用 Firebase 云消息(FCM)

在系统开发过程中，没有发现任何问题。

但是当我构建到生产环境时遇到问题(ng build --prod)

下方错误，

ng 版本 6.1.10
节点版本 10.8.0
@angular/fire版本5.1.3
firebase 版本 6.0.2

[代码]

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"
],

环境（environment.ts 和 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);
            });
    }
}

非常感谢。 _/\_

Answer 1

我解决了下面的问题解决方案。

看看devDependencies

我将 @angular-devkit/build-angular 版本从 0.13.9 降级到 0.8.9

我认为 @angular/fire 部分 firebase/messaging 与 TerserPlugin

的构建不兼容

因为版本 0.13.9 使用 TerserPlugin 构建，但版本 0.8.9 使用 UglifyJSPlugin

构建

我不确定这是最好的方法，但它让我能够继续工作

大家可以推荐我

./node_modules/@angular/fire/messaging/messaging.js 中的错误

ERROR in ./node_modules/@angular/fire/messaging/messaging.js

angularfire

firebase-cloud-messaging

angular

angular-service-worker

angular6