Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot enable prod mode after platform setup. Angular 5 Production build

Error:

Uncaught Error: Cannot enable prod mode after platform setup. at main.bundle.js:1 

Case:

Error occurs on app start, after generating build using ng build --prod. However, the development builds, compiled using ng serve or ng build, are all working fine.

What I tried:

-Upgrading global and local @angular/cli to latest version i.e. 1.6.0, following this answer.

package.json:

{
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "auth0-js": "^8.11.3",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.2.16",
    "@types/node": "~6.0.60",
    "@types/rx": "^4.1.1",
    "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-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "^2.6.2"
  }
}

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));

Min code to reproduce error:

git/cli-reproapp

like image 815
Syed Ali Taqi Avatar asked Dec 08 '17 12:12

Syed Ali Taqi


1 Answers

In the sample app you provided at git/cli-reproapp the error is occurring because of this line :-

export const isInDevMode = isDevMode();

in file cli-reproapp/src/app/app.constants.ts. So as a workaround you can create a function instead of constant isInDevMode as is shown below. So that isDevMode() is called later (most importantly after enableProdMode() is called) when it is actually used in the code.

export function isInDevMode():boolean {
    return isDevMode();
}

Obviously after that you will also need to change the lines where "isInDevMode" constant is used with calls to the newly created "isInDevMode()" method. So in the sample app you will need to replace the below line in app.component.ts

this.title = isInDevMode ? 'App in dev mode works.' : 'App is prod mode works.'

with this one :-

this.title = isInDevMode() ? 'App in dev mode works.' : 'App is prod mode works.'

You can also see the working version of the sample app at the link git/cli-reproapp(working).

like image 113
Yatharth Varshney Avatar answered Oct 02 '22 14:10

Yatharth Varshney