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
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With