title: Angular - Receiving Errors Only in Production Build
body: <p>I have an Angular 6 app that runs as expected in development mode. However, whenever, I run it in production mode, I receive at least two unusual errors that I cannot pinpoint. The first is as follows:</p>
  
  <pre><code>core.js:1545 ERROR TypeError: Bo(...).onMouseLeave is not a function
      at Object.handleEvent (client.component.ngf…ild-optimizer.js:82)
      at Object.handleEvent (core.js:9865)
      at Object.handleEvent (core.js:10409)
      at Gr (core.js:7325)
      at core.js:7770
      at HTMLElement.&lt;anonymous&gt; (platform-browser.js:1097)
      at e.invokeTask (zone.js:421)
      at Object.onInvokeTask (core.js:3645)
      at e.invokeTask (zone.js:420)
      at t.runTask (zone.js:188)
  </code></pre>
  
  <p>I build it with source maps enabled; however, line 1545 in core.js is just the beginning of a block comment:</p>
  
  <pre><code>    function defaultErrorLogger(console) {
      var values = [];
      for (var _i = 1; _i &lt; arguments.length; _i++) {
          values[_i - 1] = arguments[_i];
      }
      console.error.apply(console, __spread(values));
  }
  
  Line 1545 -&gt; /**
   * @license
   * Copyright Google Inc. All Rights Reserved.
   *
   * Use of this source code is governed by an MIT-style license that can be
   * found in the LICENSE file at https://angular.io/license
   */
  /**
  </code></pre>
  
  <p>This is certainly not helpful. However, although the error is irritating, this piece of the application functions fine. More concerning is the following: </p>
  
  <pre><code>core.js:1545 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'subscribe' of undefined
  TypeError: Cannot read property 'subscribe' of undefined
      at new e (dropdown.js:97)
      at fi (core.js:8921)
      at di (core.js:8796)
      at zi (core.js:10013)
      at ta (core.js:10329)
      at Xi (core.js:10248)
      at zi (core.js:10041)
      at Fi (core.js:9927)
      at Object.ia [as createRootView] (core.js:10442)
      at t.create (core.js:8271)
      at new e (dropdown.js:97)
      at fi (core.js:8921)
      at di (core.js:8796)
      at zi (core.js:10013)
      at ta (core.js:10329)
      at Xi (core.js:10248)
      at zi (core.js:10041)
      at Fi (core.js:9927)
      at Object.ia [as createRootView] (core.js:10442)
      at t.create (core.js:8271)
      at j (zone.js:814)
      at j (zone.js:771)
      at zone.js:873
      at e.invokeTask (zone.js:421)
      at Object.onInvokeTask (core.js:3645)
      at e.invokeTask (zone.js:420)
      at t.runTask (zone.js:188)
  </code></pre>
  
  <p>Again it points to line 1545 in core.js. Not very helpful. The second error occurs when I attempt to login into my application as an "admin". This error also occurs if I attempt to navigate to an admin route directly through the address bar (after having logged in).</p>
  
  <p>login.component.ts</p>
  
  <pre><code>    @Component({
    selector: "app-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.scss"]
  })
  export class LoginComponent implements OnInit {
    user: string;
    pass: string;
    loginFailed: boolean;
    isLoading: boolean;
    constructor(
      private authService: AuthService,
      private userService: UserService,
      private router: Router
    ) {
      this.user = "";
      this.pass = "";
      this.loginFailed = false;
      this.isLoading = false;
    }
  
    ngOnInit() {
      if (this.authService.isLoggedIn) {
        if (this.userService.getIsAdmin()) {
          this.router.navigate(["/admin"]);
        } else {
          this.router.navigate(["/client"]);
        }
      }
    }
  
    onSubmit() {
      this.isLoading = true;
      this.authService.login(this.user, this.pass).subscribe(
        res =&gt; {
          this.isLoading = false;
          if (this.userService.getIsAdmin()) {
            this.router.navigate(["/admin"]);
          } else {
            this.router.navigate(["/client"]);
          }
        },
        er =&gt; {
          this.loginFailed = true;
          this.isLoading = false;
        }
      );
    }
  }
  </code></pre>
  
  <p>admin-routing.module.ts</p>
  
  <pre><code>    const routes: Routes = [
    {
      path: "admin",
      component: AdminComponent,
      canActivate: [AdminGuard],
      children: [
        {
          path: "",
          canActivateChild: [AdminGuard],
          children: [
            { path: "message/add", component: MessageAddComponent },
            { path: "message", component: MessageComponent },
            { path: "rev/add", component: RevAddComponent },
            { path: "rev", component: RevComponent },
            { path: "video/add", component: VideoAddComponent },
            { path: "video", component: VideoComponent },
            { path: "document/add", component: DocumentAddComponent },
            { path: "document", component: DocumentComponent },
            { path: "update", component: UpdateComponent },
            { path: "", component: AdminPanelComponent }
          ]
        }
      ]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class AdminRoutingModule {}
  </code></pre>
  
  <p>admin-guard.service.ts</p>
  
  <pre><code>@Injectable()
  export class AdminGuard implements CanActivate, CanActivateChild {
    constructor(
      private authService: AuthService,
      private userService: UserService,
      private router: Router
    ) {}
    canActivate() {
      console.log("AdminGuard#canActivate called");
      return this.checkAdmin();
    }
  
    canActivateChild() {
      return this.canActivate();
    }
  
    checkAdmin() {
      if (this.userService.getIsAdmin()) {
        return true;
      } else {
        this.router.navigate(["/login"]);
      }
    }
  }
  </code></pre>
  
  <p>user.service.ts</p>
  
  <pre><code>@Injectable()
  export class UserService {
    isAdmin = false;
    adminRoles = new Array&lt;String&gt;("ROLE_ADMIN", "ROLE_DL");
  
    constructor(private authService: AuthService) {}
  
    public getUserID(): number {
      return decode(this.authService.getToken()).userID;
    }
  
    public getStores(): Array&lt;string&gt; {
      return decode(this.authService.getToken()).stores;
    }
  
    public getUserName(): string {
      return decode(this.authService.getToken()).user_name;
    }
  
    public getIsAdmin(): boolean {
      const userRoles = decode(this.authService.getToken()).authorities;
  
      return (
        this.authService.isLoggedIn &amp;&amp;
        userRoles.filter(e =&gt; {
          return this.adminRoles.indexOf(e) &gt; -1;
        }).length &gt; 0
      );
    }
  }
  </code></pre>
  
  <p>packages.json</p>
  
  <pre><code>  "name": "king-board",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^6.1.0",
      "@angular/common": "^6.1.0",
      "@angular/compiler": "^6.1.0",
      "@angular/core": "^6.1.0",
      "@angular/forms": "^6.1.0",
      "@angular/http": "^6.1.0",
      "@angular/platform-browser": "^6.1.0",
      "@angular/platform-browser-dynamic": "^6.1.0",
      "@angular/router": "^6.1.0",
      "@ng-bootstrap/ng-bootstrap": "^2.0.0",
      "angular-epic-spinners": "^1.0.9",
      "animate.css": "^3.7.0",
      "auth": "^1.0.1",
      "bootstrap": "^4.1.3",
      "core-js": "^2.5.4",
      "jwt-decode": "^2.2.0",
      "moment": "^2.22.2",
      "ngx-loading": "^1.0.14",
      "rxjs": "^6.2.2",
      "rxjs-compat": "^6.2.2",
      "zone.js": "^0.8.26"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.6.0",
      "@angular/cli": "~6.0.0",
      "@angular/compiler-cli": "^6.1.0",
      "@angular/language-service": "^6.1.0",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.2.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~1.4.2",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.3.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1",
      "typescript": "^2.7.2"
    }
  }
  </code></pre>
  
  <p>I have posted the code that I think is most likely to be causing the issue. Unfortunately, it is difficult to say since the error gives me little advice. I can use the client portion of the app (though I receive the first error), and the app runs fine in development mode, it is using the production version of the app as an admin that does not work at all. Any pointers would be appreciated.</p>
  
  <p>EDIT </p>
  
  <pre><code>client.component.ts (partial)
  
  ngOnInit() {
      this.route.paramMap
        .pipe(
          switchMap((params: ParamMap) =&gt; {
            this.storeID =
              params.get("storeID") === null
                ? Number(this.userService.getStores()[0])
                : +params.get("storeID");
            return of({});
          })
        )
        .subscribe();
  
      this.dateTime = new Date();
  
      this.updateData();
  
      this.timerID = window.setInterval(() =&gt; {
        this.checkUpdates();
      }, 1000 * 60 * 10);
    }
  
    ngOnDestroy() {
      window.clearInterval(this.timerID);
      window.clearInterval(this.modalTimerID);
      window.clearInterval(this.annivTimerID);
    }
    logout(ev: Event) {
      ev.preventDefault();
      this.authService.logout();
      this.router.navigate(["/login"]);
    }
  
    checkUpdates() {
      this.dateTime = new Date();
      if (this.authService.checkTokenExpired()) {
        this.authService.getRefreshToken();
      }
      this.updateService
        .checkUpdates(this.storeID)
        .subscribe(res =&gt; (this.updateNeeded = res));
  
      if (this.updateNeeded) {
        this.updateData();
      }
    }
  
    private updateData() {
      this.propertyService
        .getProperty(this.storeID)
        .subscribe(res =&gt; (this.storeNumber = res.propertyNumber));
      this.vidService.getActiveVideos().subscribe(res =&gt; (this.vidResults = res));
     // Code omitted for brevity
    }
  
    private checkPriorityMessages(msgs: Array&lt;Message&gt;) {
      if (msgs.filter(m =&gt; m.messageLevel === 1).length &gt;= 1) {
        this.modalRef = this.modalService.open(PriorityModalComponent);
        this.modalRef.componentInstance.msg = this.msgResults.filter(
          m =&gt; m.messageLevel === 1
        )[0];
      } else if (this.modalRef !== undefined) {
        this.modalRef.close(0);
      }
    }
  
    private setEventTimer(msgs: Array&lt;Message&gt;) {
      if (msgs.filter(m =&gt; m.messageLevel === 3).length !== 0) {
        this.modalTimerID = window.setInterval(
          () =&gt; this.openEventModal(),
          1000 * 60 * 15
        );
      } else if (this.modalTimerID !== undefined) {
        window.clearInterval(this.modalTimerID);
      }
  
      if (msgs.filter(m =&gt; m.messageLevel === 4).length !== 0) {
        this.annivTimerID = window.setInterval(
          () =&gt; this.openAnnivModal(),
          1000 * 60 * 17
        );
      } else if (this.annivTimerID !== undefined) {
        window.clearInterval(this.annivTimerID);
      }
    }
  
  // Code omitted for brevity
  
    }
  }
  </code></pre>