Angular 8.2.0, I am using webpack configuration and running into the same issue when the ‘@angular-devkit/build-optimizer/webpack-loader’ is part of the bundling process. I suppose this loadeder removes that variable.

Removing the loader from the rules fixes the issue (but results in not-optimized builds). This can be fixed by injecting the missing variables into the bundle, I have used webpack.DefinePlugin for that:

plugins.push(
      new BuildOptimizerWebpackPlugin(),
      new AngularCompilerPlugin({
        tsConfigPath: './tsconfig-aot.json',
        entryModule: './src/app/app.module#AppModule'
      }),
      new webpack.DefinePlugin({
        ngDevMode: false,
        ngI18nClosureMode: false
      })
    )

ngDevMode and ngI18nClosureMode are normally both defined in:

https://github.com/angular/angular/blob/78146c1890b472621acf33d778477db8df816043/packages/compiler-cli/src/tooling.ts

same issue. @angular/core 8.1.2 Is there any way to fix it?

Upd: it happens only for production build. Downgrade of all @angular/* to “~8.0.0” has solved the issue.

Ok, I know what’s going on. If you make a new project and run ng serve --prod, the served project has no error.

Then if you open node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js and remove these line:

                    passes: buildOptions.buildOptimizer ? 3 : 1,
                    // global_defs: angularGlobalDefinitions, // <-- comment this one

And run ng serve --prod again, you can see this error at runtime:

Uncaught ReferenceError: ngDevMode is not defined
    at Module.zUnb (core.js.pre-build-optimizer.js:8325)
    at f (bootstrap:79)
    at Object.0 (events.js:426)
    at f (bootstrap:79)
    at t (bootstrap:45)
    at Array.r [as push] (bootstrap:32)
    at main.78106fc448395a14fbe1.js:1

You can work around this problem in your custom webpack setup by importing our provided Terser global definition like we do in Angular CLI.

const terserOptions = {
  // ...
  compress: {
    // ...
    global_defs: require('@angular/compiler-cli').GLOBAL_DEFS_FOR_TERSER,
  }
}

But I think this is a bug because code in @angular/core shouldn’t break when optimized without these definitions.

The source line where the error comes from is this one: https://github.com/angular/angular/blob/961d663fbef4d6ea2ebb5a60f38799a273fa71ed/packages/core/src/render3/instructions/lview_debug.ts#L58

There are other similar usages throughout the codebase. It is indeed an error to reference something that isn’t defined. We can see this in a chrome console or node repl:

kamik@RED-X1C6 MINGW64 /d/sandbox
$ node
> var something = missingGlobalVariable && true
Thrown:
ReferenceError: missingGlobalVariable is not defined
> global.missingGlobalVariable = false
false
> var something = missingGlobalVariable && true
undefined
> console.log(something)
false
undefined

I think we need to change the code in@angular/core to not have errors when ngDevMode is not defined.

/cc @kara @mhevery @IgorMinar

Same here, I have this issue in only in production build. Tried to find the reason. Looks like the issue here https://github.com/angular/angular/blob/cb848b94102855d1e773892b25375304102cab69/packages/core/src/render3/instructions/lview_debug.ts#L60 I think it should be replaced with export const LViewArray = (typeof ngDevMode !== 'undefined') && createNamedArrayType('LView'); cause ngDevMode does not exist in production build, not sure though.

@JonWallsten I think when team members paste permalinks they get converted into those snippets automatically. https://github.com/angular/angular/pull/32079 should address this problem.