Angular-cli: Uncaught Error: Cannot enable prod mode after platform setup.

[clcaza]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.4.5
node: 6.9.5
os: win32 x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.5
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

Repro steps.

build with --prod

ng build --prod

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';
import {hmrBootstrap} from "./hmr";

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

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
  if (module[ 'hot' ]) {
    hmrBootstrap(module, bootstrap);
  } else {
    console.error('HMR is not enabled for webpack-dev-server!');
  }
} else {
  bootstrap();
}

I have not use isDevMode()。

The log given by the failure.

open the page in the chrome，console print error：

vendor.9844cf9b240425f86ca5.bundle.js:1 Uncaught Error: Cannot enable prod mode after platform setup.
at ot (vendor.9844cf9b240425f86ca5.bundle.js:1)
at Object.cDNt (main.fd315af370796125e230.bundle.js:1)
at n (inline.0a6d3c44cde3756d710d.bundle.js:1)
at Object.0 (main.fd315af370796125e230.bundle.js:1)
at n (inline.0a6d3c44cde3756d710d.bundle.js:1)
at window.webpackJsonp (inline.0a6d3c44cde3756d710d.bundle.js:1)
at main.fd315af370796125e230.bundle.js:1

Desired functionality.

enable prod mode.

Mention any other details that might be useful.

build without --target=production

ng build --environment=prod

the relative part in vendor.js

var _devMode = true;
var _runModeLocked = false;
var _platform;
var ALLOW_MULTIPLE_PLATFORMS = new InjectionToken('AllowMultipleToken');

function enableProdMode() {
    if (_runModeLocked) {
        throw new Error('Cannot enable prod mode after platform setup.');
    }
    _devMode = false;
}

function isDevMode() {
    _runModeLocked = true;
    return _devMode;
}

variable _runModeLocked initiate false。it changes to true when we call isDevMode().

build with --target=production

ng build --prod

the relative part in vendor.js

function ot() { if (No) throw new Error("Cannot enable prod mode after platform setup.");
                Ro = !1 }

function st() { return No = !0, Ro }

No = !1,

Ro = function(t) {
                function e(e, n, r, i, o) { t.call(this), this.initialState = e, this.condition = n, this.iterate = r, this.resultSelector = i, this.scheduler = o } return jo(e, t), e.create = function(t, n, r, i, o) { return 1 == arguments.length ? new e(t.initialState, t.condition, t.iterate, t.resultSelector || Io, t.scheduler) : void 0 === i || g(i) ? new e(t, n, r, Io, i) : new e(t, n, r, i, o) }, e.prototype._subscribe = function(t) { var n = this.initialState; if (this.scheduler) return this.scheduler.schedule(e.dispatch, 0, { subscriber: t, iterate: this.iterate, condition: this.condition, resultSelector: this.resultSelector, state: n }); for (var r = this, i = r.condition, o = r.resultSelector, s = r.iterate;;) { if (i) { var a = void 0; try { a = i(n) } catch (e) { return void t.error(e) } if (!a) { t.complete(); break } } var u = void 0; try { u = o(n) } catch (e) { return void t.error(e) } if (t.next(u), t.closed) break; try { n = s(n) } catch (e) { return void t.error(e) } } }, e.dispatch = function(t) { var e = t.subscriber,
                        n = t.condition; if (!e.closed) { if (t.needIterate) try { t.state = t.iterate(t.state) } catch (t) { return void e.error(t) } else t.needIterate = !0; if (n) { var r = void 0; try { r = n(t.state) } catch (t) { return void e.error(t) } if (!r) return void e.complete(); if (e.closed) return } var i; try { i = t.resultSelector(t.state) } catch (t) { return void e.error(t) } if (!e.closed && (e.next(i), !e.closed)) return this.schedule(t) } }, e }(fi),

No = Ro.create;

the variable No initiate !1(false)，then reassign RO.create.

I don't clear whether if RO.create change the No value to true.

[larssn]

Any workarounds? Kinda would like to build our app in prod mode.

EDIT:
Moved my isDevMode checks out of our angular modules and it works.

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[sataqi]

I'm facing the same issue. It occurs when isDevMode() from @angular/core is used.

I have created a minimal repo here: https://github.com/sataqi/cli-reproapp/

Along with that, the link to SO question is: https://stackoverflow.com/questions/47714132/cannot-enable-prod-mode-after-platform-setup-angular-5-production-build

[bananer]

I think it should be made clear that isDevMode() should only be called after enableProdMode() was called.

@sataqi since you are saving the value as a global constant here, it will be called before you call enableProdMode() in main.ts.

There is very little overhead to just calling isDevMode() every time from inside your components, e.g. here, and that should make it work.

[sataqi]

@bananer yeah, I noticed this while creating the sample app. However, the original implementation, which caused issue, was a file containing API base URLs and endpoints, which were being used in multiple services.

[clcaza]

I‘m so sorry! My Code changes a lot.I find that the issue has gone。It succeeded to enable prod mode today . I tried to reprocude this issue, but failed.

As @bananer said,this issue occurs when using isDevMode() before enableProdMode() .

[Tooluloope]

Please I'm having this same issue @bananer could you please explain your workaround clearly

[Tooluloope]

I only have enableProdMode() and not isDevMode() so I'm so confused @bananer

[filipesilva]

Like @bananer mentioned, you cannot call isDevMode() before enableProdMode() is called. The error shown is expected behaviour.

Closing as answered by @bananer.

@Tooluloope you should search your code for calls to isDevMode. If it is not in your code, it might be in a library. If you can provide a reproduction we might be able to investigate.

[JamesMcGuigan]

Spent a few hours finding a fix for this, so will document.

Browser exception appeared after running:

ng build --prod -c production
http-server ./dist/$project/

My problem was that I had a globals.ts file with the following:

import * as core from '@angular/core';
import {isDevMode} from '@angular/core';

if ( isDevMode() ) {
  window['@angular/core'] = core;
}

Root cause is that this code snippit (copied from the web) relied on the isDevMode() function, and this file was included via main.ts but before the required call to enableProdMode()

The most robust solution is to remove the dependency on isDevMode(), and rely on environment.production as your primary source of truth, and add a try/catch block around enableProdMode().

globals.ts

import * as core from '@angular/core';
import {environment} from './environments/environment';

if ( !environment.production ) {  // BUGFIX: isDevMode() throws exception when false
  window['@angular/core'] = core;
}

main.ts

if ( environment.production ) {
  try {
    enableProdMode();
  } catch(exception) {
    console.error('BUGFIX: calling isDevMode() in imports before enableProdMode() throws exception - https://github.com/angular/angular-cli/issues/8340#\n', exception);
  }
}

In the example codebase cited and solved in the comments above, the offending app.constants.ts was:

import { isDevMode } from '@angular/core';
export const isInDevMode = isDevMode();

[p3x-robot]

https://github.com/angular/angular/issues/30820

[p3x-robot]

why is it closed, for me it is giving same error, although it is not using via angular/cli , but webpack, as back the time there was no cli (Angular 2) and i have been upgrading up to 8.1.0 now.

[p3x-robot]

i was using isDevMode in my code and that function should only call after enableProdMode and i was reverse, now it works.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}