ngDevMode is not defined - regression since 15.2

[vzakharov-rxnt]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

Yes

Description

After upgrading from prior 15.2 to 15.2 or later (including latest 16.x), I am getting ngDevMode is not defined error on app load. The error is terminating, app does not load.

I am using custom webpack plugin and esbuild-loader to build my app.

I reproduced the issue using standard Angular boilerplate project here:

• https://ng-esbuild-minify.netlify.app/
• https://github.com/vzakharov-rxnt/ng-esbuild-minify

To prove that it works fine in 15.1, I created a branch where the issue is fixed, and opened a PR to merge. Only package.json was changed, downgrading Angular to 15.1. PR triggers CI build, so you can confirm that the issue is indeed fixed:

• Fix site loading issue by downgrading to Angular 15.1.x vzakharov-rxnt/ng-esbuild-minify#1
• https://deploy-preview-1--ng-esbuild-minify.netlify.app/

Please provide a link to a minimal reproduction of the bug

https://ng-esbuild-minify.netlify.app/

Please provide the exception or error you saw

core.mjs:11067 Uncaught ReferenceError: ngDevMode is not defined
    at 991 (core.mjs:11067:54)
    at a (bootstrap:19:30)
    at Ko (main.500e5851.js:391:239)
    at main.500e5851.js:391:254
    at l (jsonp chunk loading:34:28)
    at main.500e5851.js:1:90

Please provide the environment you discovered this bug in (run ng version)

Angular: 16.2.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.1
@angular-devkit/build-angular   16.2.1
@angular-devkit/core            16.2.1
@angular-devkit/schematics      16.2.1
@angular/cli                    16.2.1
@schematics/angular             16.2.1
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.3

Anything else?

In a real production app, our custom webpack configuration file is more complex and required to make a hybrid AngularJS/Angular 16 app work.

We are using EsbuildPlugin to speed up prod build time by a factor of 2-3x, which is significant when it comes to CI/CD.

[alan-agius4]

Hi @vzakharov-rxnt,

Custom webpack configurations are not supported by the Angular team. If the problem persists using the Angular CLI directly. please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior. You can use ng new repro-app to create a new project where you reproduce the problem.

[vzakharov-rxnt]

@alan-agius4 Are you saying it's possible to build a hybrid app without custom webpack config?
Or are you not supporting hybrid apps either? (anymore)

Here is how our prod app config looks:

const webpack = require('webpack');
const { merge } = require('webpack-merge');

module.exports = (config, options) => {
  if (options.optimization) {
    // https://how-to.dev/how-to-speed-up-angular-cli-app-with-esbuild-loader
    // remove 2 first minimizers, hoping they are the TerserPlugin
    // config.optimization.minimizer.shift();
    // config.optimization.minimizer.shift();
    //
    // config.optimization.minimizer.unshift(
    //   new EsbuildPlugin({}),
    // );

    // Replacing TerserPlugin with ESBuildMinifyPlugin minimizer
    // speeds up the prod build time from 40-80 seconds down to 8-18 seconds
    // but bundle size is roughly 5% larger, worth the trade-off?
  }

  const newConfig = {
    devtool: 'source-map', // only required if using ESBuildMinifyPlugin, otherwise no source maps
    output: {
      filename: 'js/[name].[contenthash:8].js',
      chunkFilename: 'js/[name].[contenthash:8].js',
    },
    module: {
      rules: [
        {
          test: /\.html$/i, // only applicable to htmls referenced via require(...)
          loader: 'html-loader',
        },
        {
          test: /\.(png|jpe?g|gif)$/i, // only applicable to images referenced via require(...)
          type: 'asset/resource',
          generator: {
            filename: 'images/[name].[contenthash][ext]'
          }
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          type: 'asset/resource',
          generator: {
            filename: 'fonts/[name].[contenthash:8][ext]'
          }
        },
      ]
    },
    plugins: [
      new webpack.ProvidePlugin({
        'window.jQuery': 'jquery',
        'jQuery': "jquery",
        '$': 'jquery',
      }),
    ],
    externals: { // prevent these libs from being included in the build
      "html2canvas": "html2canvas",
      "canvg": "canvg"
    }
  }

  return merge(config, newConfig);
}

[vzakharov-rxnt]

The solution was so simple:
Changing

new EsbuildPlugin({})

to

new EsbuildPlugin({
   define: { ngDevMode: "undefined" },
})

Many thanks to JeanMeche!
Leaving it here for others to find via search engines.

[angular-automatic-lock-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.}