ng serve --prod throws "ERROR TypeError: (void 0) is not a function"

Question

So when got this trouble in Angular-CLI app.

Here is what happening: ng serve, ng serve --aot produces no exceptions, everything works fine. Only running ng serve --prod breaks while surfing the app.

ERROR TypeError: (void 0) is not a function

Was searching for answers, and found these dont's, so I have written 'public' before every property in app and checked if there was function calls in providers, but nothing changed.

Next I tried running it with --aot flag and was working just fine, but still crashing while --prod with same errors.

It crashes exactly while runnig login process which is:

• send http POST with login and password data
• if request resolves, dispatch ngRx-Store custom login event (simple flag)
• then router.navigateByUrl to another page

It is weird that I have similar processes everywhere, but it crashes in the exact place.

Can please someone provide me a little info abut where should I dig next? Cheers!

---

UPDATE: I was cutting off in code every single part of login process, and then building it with --prod, and it turns out that MatDialog from @angular/material was producing the error. Login was triggered after MatDialog login component resolves with afterClosed() hook to its parent, and it produces exceptions somehow.

So parent, who was triggered pop-up was HeaderComponent, which contains method:

    openLoginDialog(): void {
        this.authService.login();
         const dialogRef = this.dialog.open(LoginDialogComponent);
         dialogRef.afterClosed().subscribe(result => {
           if (result) {
             this.authService.login();
           }
        });
      }

And inside LoginDialogComponent was method which simply resolves:

    login(login, password) {
      this.authService.tryLogin(login, password).subscribe(data => {
        this.dialogRef.close(true);
      });
    }

After I removed MatDialog in another words got rid of the only popup on project, the error disappeared. I have made another component with its own route for Login form, but still consider that removing whole working module beacause of build errors is not a solution.

my package.json:

    "dependencies": {
        "@angular/animations": "^5.0.2",
        "@angular/cdk": "^5.0.0-rc.1",
        "@angular/common": "^5.0.0",
        "@angular/compiler": "^5.0.0",
        "@angular/core": "^5.0.0",
        "@angular/flex-layout": "^2.0.0-beta.10-4905443",
        "@angular/forms": "^5.0.0",
        "@angular/http": "^5.0.0",
        "@angular/material": "^5.0.0-rc.1",
        "@angular/platform-browser": "^5.0.0",
        "@angular/platform-browser-dynamic": "^5.0.0",
        "@angular/platform-server": "^5.0.0",
        "@angular/router": "^5.0.0",
        "@ngrx/store": "^5.0.0",
        "@nguniversal/common": "^5.0.0-beta.5",
        "@nguniversal/express-engine": "^5.0.0-beta.5",
        "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
        "core-js": "^2.4.1",
        "hammerjs": "^2.0.8",
        "ngrx-store-freeze": "^0.2.0",
        "primeng": "^5.0.2",
        "rxjs": "^5.5.2",
        "tassign": "^1.0.0",
        "zone.js": "^0.8.14"
      },
      "devDependencies": {
        "@angular/cli": "^1.6.2",
        "@angular/compiler-cli": "^5.0.0",
        "@angular/language-service": "^5.0.0",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "~6.0.60",
        "codelyzer": "~3.2.0",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.2.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "ts-loader": "^2.3.7",
        "ts-node": "~3.2.0",
        "tslint": "~5.7.0",
        "typescript": "~2.4.2"
      }

Acus

can you say for sure that your production build deployed successfully? – Backlash

There should be some error in your code. ng serve or ng build won't throw the typo or kind of errors but when you do ng serve --prod or ng build --prod it will. – Spinose

I have been building and serving it many times with different options, on server and locally, only serving with --prod making this error. And there are no errors in terminal while building or serving, they fall only in browser. I am using the exact commands ng build --prod && ng serve --prod – Acus

Please try building using the following commands: --environment prod --aot true --output-hashing all --sourcemaps false --extract-css true --named-chunks false --build-optimizer true If the error does not occur with those, it is very likely to be caused by uglify.js – Lichter

@ArseniyShelestyuk did you figure out what was causing it? – Lingerfelt

@SebastianKrogull Thanx - it got solved - by your command – Henn

Had something similar to this in the past. Can't remember exactly but can you try to check for dependencies like mobx, mobx-angular, lodash or somethin'? – Monserratemonsieur

You might have a similar case with this github.com/500tech/angular-tree-component/issues/… – Monserratemonsieur

uglify.js is usually not causing it. It is caused when something is uglified which was not meant to be uglified, in my experience most of the time it is caused by something like that ClassName.name is used (check your LoginDialogComponent and what it uses) - such things end up as a.name and b.name which won't work after uglifying and minifying. – Scullion

Answer 1

You can check where is the exact issue by hitting the following command.

ng build --prod --source-map=true

There is a possibility that this will not workout for you but I hope this can. the reason behind this issue is bundling a js file which is already minified js file. If you find any package is creating the issue try to remove them to fix.

Markel

Try with : ng build --configuration=production --source-map – Untangle

Answer 2

The --prod option will activate the following codes in the angular.json file within your project folder

      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }

Need to make sure your codes work when it is served from localhost:4200 or whatever dev server, especially with security as they are normally different from target 'prod' environment.

Creosote

Answer 3

You need use this syntax:

ng serve --configuration production

Swats