title: ERROR in ./node_modules/@angular/fire/messaging/messaging.js
body: <p>My project use <strong>Firebase Cloud Message</strong>(FCM) </p>
  
  <p>during system development, no problems were found.</p>
  
  <p>But have the problem when I build to the production(<code>ng build --prod</code>)</p>
  
  <p>Error below,</p>
  
  <p><a href="https://i.stack.imgur.com/YGRGw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YGRGw.png" alt="enter image description here"></a></p>
  
  <ul>
  <li>ng version 6.1.10</li>
  <li>node version 10.8.0</li>
  <li>@angular/fire version 5.1.3</li>
  <li>firebase version 6.0.2</li>
  </ul>
  
  <p>[Code]</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
      "gcm_sender_id": "103953800507"
  }
  </code></pre>
  
  <p><strong>firebase-messaging-sw.js</strong></p>
  
  <pre><code>// 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();
  </code></pre>
  
  <p><strong>angular.json</strong></p>
  
  <pre><code>"assets": [
      "src/assets",
      "src/i18n",
      "src/favicon.ico",
      "src/manifest.json",
      "src/firebase-messaging-sw.js"
  ],
  </code></pre>
  
  <p><strong>environments(environment.ts and environment.prod.ts)</strong></p>
  
  <pre><code>export const environment = {
      ...
      ...
      firebase: {
          apiKey: "***O8qR*********",
          authDomain: "******.firebaseapp.com",
          databaseURL: "https://******.firebaseio.com",
          projectId: "message-***",
          storageBucket: "message-******.appspot.com",
          messagingSenderId: "911******",
      }
  };
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>imports: [
      ...
      AngularFireModule.initializeApp(environment.firebase),
      AngularFireAuthModule,
      AngularFireMessagingModule
  ],
  </code></pre>
  
  <p><strong>messaging.service.service.ts</strong></p>
  
  <pre><code>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) =&gt; {
                      _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(
              () =&gt; {
                  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) =&gt; {
                      console.log(this.appProfile.userProfile);
                      console.log(token);
                  },
                  (err) =&gt; {
                      console.error('Unable to get permission to notify.', err);
                  }
              );
      }
  
      /**
       * hook method when new notification received in foreground
       */
      receiveMessage() {
          this.angularFireMessaging.messages
              .subscribe(
                  (payload) =&gt; {
                      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&lt;SuccessResponse&lt;any&gt;&gt;(this.rdsServicePath + '/fcm/register-topics', httpOptions)
              .subscribe(s =&gt; {
                  console.log(s);
              });
      }
  }
  </code></pre>
  
  <p>Thank you so much. <code>_/\_</code></p>