Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReferenceError: ngDevMode is not defined #31595

Open
mcalmus opened this issue Jul 16, 2019 · 26 comments

Comments

@mcalmus
Copy link

commented Jul 16, 2019

馃悶 bug report

Affected Package

The issue is caused by package @angular/core

Is this a regression?

Not sure

Description

A clear and concise description of the problem...

If there are compilation errors in a template (while using "ng serve"), I am seeing the error "ReferenceError: ngDevMode is not defined" when running in Firefox (60.6.1esr) or Edge. Chrome shows the actual compilation errors.

馃敩 Minimal Reproduction

https://stackblitz.com/...

Create simple app with a component. Introduce compilation errors. Try to run app in browser.

The error (with Angular 8.1.1 is in core.js:13393

馃敟 Exception or Error




ReferenceError: ngDevMode is not defined

馃實 Your Environment

Angular Version: 8.1.1 (also 8.1.0)





Anything else relevant?

@miroslavkovac

This comment has been minimized.

Copy link

commented Jul 17, 2019

I am seeing the same error after upgrading from Angular 6 after a long time. The error is in generated vendors~main.a7289f63f220e84f1b85.chunk.js and it looks like couple of ngDevMode variables names are wrongly put inside generated JS file:

...
ngDevMode, ngDevMode, ngDevMode, ngDevMode, ngDevMode, ngDevMode, ngDevMode, ngDevMode, ngDevMode, ngDevMode;
var qr = function() {
    return Promise.resolve(null)
}();
function Kr(r) {
...
@mezhik91

This comment has been minimized.

Copy link

commented Jul 22, 2019

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.

@VlasovSergey

This comment has been minimized.

Copy link

commented Jul 22, 2019

Same here,
I have this issue in only in production build.
Tried to find the reason. Looks like the issue here

export const LViewArray = ngDevMode && createNamedArrayType('LView');

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.

@mcalmus

This comment has been minimized.

Copy link
Author

commented Jul 22, 2019

FWIW: I was NOT using a production build when I encountered the issue.

@ghost

This comment has been minimized.

Copy link

commented Jul 26, 2019

Same error with --prod, it looks like this class is gone in 8.2.0-rc.0.

@CapLonelyFlaw

This comment has been minimized.

Copy link

commented Jul 27, 2019

Temporary fixed this issue by declaring ngDevMode inside index.html before all scripts only for prod build
<% if (htmlWebpackPlugin.options.metadata.ENV === 'production') { %> <script> var ngDevMode = false; </script> <% } %>

Also i did downgrade of all @angular/* to "~8.0.0" and it has solved the issue.

@pshurygin

This comment has been minimized.

Copy link

commented Jul 31, 2019

I see this error for all my production builds even without compilation errors both with 8.1.3 and 8.2.0-rc.0

@hoonzis

This comment has been minimized.

Copy link

commented Aug 7, 2019

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

@JonWallsten

This comment has been minimized.

Copy link
Contributor

commented Aug 7, 2019

@alxhub: Not sure this is freq: low anymore. Seems like a lot of us has this issue. I guess it applies to anyone using Webpack/AngularCompilerPlugin

Edit: Isn't the question WHY the lview_debug.ts file is in the bundle at all for production builds? It's obviously a debug file.

@JonWallsten

This comment has been minimized.

Copy link
Contributor

commented Aug 7, 2019

@filipesilva: I noticed you added a test case for GLOBAL_DEFS_FOR_TERSER a couple of months ago. So you might know what's going on.

  1. I can't find any reference in the project for GLOBAL_DEFS_FOR_TERSER besides in the test-file. So not sure if terser is cleaning this one up?

  2. I can find the type declaration const ngDevMode: null|NgDevModePerfCounters; but I can't find any place where it's se to false, which it should according to the comment below.

/**
 * The idea is that unless we are doing production build where we explicitly
 * set `ngDevMode == false` we should be helping the developer by providing
 * as much early warning and errors as possible.
 */
@filipesilva

This comment has been minimized.

Copy link
Member

commented Aug 7, 2019

@JonWallsten GLOBAL_DEFS_FOR_TERSER is meant to be imported by the build system, and sets ngDevMode to a hardcoded false.

Does anyone have a precise reproduction for seeing these errors at runtime so I can investigate? When I do ng serve --prod on a new application I don't see any ReferenceError: ngDevMode is not defined at runtime.

@JonWallsten

This comment has been minimized.

Copy link
Contributor

commented Aug 7, 2019

@filipesilva Let me see if I can reproduce in my in my Webpack AOT Angular repo.

Edit: I checked the @angular/core bundles files, ngDevMode is not set in fesm5 or fesm2015.

@JonWallsten

This comment has been minimized.

Copy link
Contributor

commented Aug 7, 2019

@filipesilva: It's easily reproducible with a minimal repo:
Repo: https://github.com/JonWallsten/angular-bug
Step 1: npm i
Step 2: npm run serve:build
Step 3: ...
Step 4: Profit!

@ghost

This comment has been minimized.

Copy link

commented Aug 7, 2019

I use too custom web pack loading, I use lazy loading with aot. I look at https://webpack.js.org/configuration/mode/ and took as a sample Mode: development, and change what i wanted. Final result is.
const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack');

module.exports = {
optimization:
{
minimize: true,
namedModules: true,
namedChunks: true,
flagIncludedChunks: false,
occurrenceOrder: false,
sideEffects: false,
usedExports: false,
concatenateModules: false,
splitChunks: {
hidePathInfo: false,
minSize: 10000,
maxAsyncRequests: Infinity,
maxInitialRequests: Infinity,
},
removeAvailableModules: false,
minimizer:
[
new TerserPlugin
(
{
cache: false,
parallel: true,
terserOptions:
{
comments: false,
mangle: false,
keep_classnames: true,
keep_fnames: true
}
}
)
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.NamedChunksPlugin()
]
};

And this work for me.

@filipesilva

This comment has been minimized.

Copy link
Member

commented Aug 7, 2019

@JonWallsten thank you for the repro, I'll try to dig in but it might take a bit to isolate the problem since it's a custom setup.

Is anyone seeing this with Angular CLI too?

filipesilva added a commit to filipesilva/angular that referenced this issue Aug 12, 2019
filipesilva added a commit to filipesilva/angular that referenced this issue Aug 12, 2019
filipesilva added a commit to filipesilva/angular that referenced this issue Aug 13, 2019
@matsko matsko closed this in 5f095a5 Sep 12, 2019
@mcalmus

This comment has been minimized.

Copy link
Author

commented Sep 20, 2019

I'm still getting this error using 9.0.0-next.7. The stack trace is slightly different. Now it's coming from initNgDevMode in core.js:1404. This does not happen in Chrome but happens in Firefox, Edge and IE.

On return !!ngDevMode;

@filipesilva

This comment has been minimized.

Copy link
Member

commented Sep 23, 2019

Reopening to investigate.

@filipesilva filipesilva reopened this Sep 23, 2019
@filipesilva

This comment has been minimized.

Copy link
Member

commented Sep 23, 2019

I followed the steps in #31595 (comment) and was able to see the error again as @mcalmus reported. I had to set "enableIvy": false in tsconfig.json and use ng serve --prod --source-map to get good source maps.

The error came from this line:

if (ngDevMode) {
// This helper is to give a reasonable error message to people upgrading to v9 that have not yet
// installed `@angular/localize` in their app.
// tslint:disable-next-line: no-toplevel-property-access
global.$localize = global.$localize || function() {
throw new Error(
'It looks like your application or one of its dependencies is using i18n.\n' +
'Angular 9 introduced a global `$localize()` function that needs to be loaded.\n' +
'Please add `import \'@angular/localize/init\';` to your polyfills.ts file.');
};
}

This is indeed a problem because this line is a toplevel side effect that checks a variable that might not exist at the toplevel. It needs to treated similarly as other toplevel side effects were in #32079, preferably in such a way that doesn't have a leftover side effect like it does now in the side-effects test (cc @petebacondarwin).

If I replace it if (false) { the error goes away so I think it should be ok.

Your report of the 1404 line is worrisome though... It's this done:

function initNgDevMode() {
    // The below checks are to ensure that calling `initNgDevMode` multiple times does not
    // reset the counters.
    // If the `ngDevMode` is not an object, then it means we have not created the perf counters
    // yet.
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
        if (typeof ngDevMode !== 'object') {
            ngDevModeResetPerfCounters(); 
        }
        return !!ngDevMode; //    <----- this is 1404
    }
    return false;
}

I'm not sure how you get there but it makes sense that it's a problem, because ngDevMode is initialized in ngDevModeResetPerfCounters only. I think this logic needs to be revisited.

@mcalmus

This comment has been minimized.

Copy link
Author

commented Sep 25, 2019

I'm not sure how you get there but it makes sense that it's a problem, because ngDevMode is initialized in ngDevModeResetPerfCounters only. I think this logic needs to be revisited.

That's the right line. Unfortunately the project is large and somewhat complicated, and I've been unable to figure out a more basic project with which to reproduce. I'll keep trying. I hope knowing the line number will at least help.

@mcalmus

This comment has been minimized.

Copy link
Author

commented Oct 2, 2019

Does a new PR need to be created for the additional patching?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can鈥檛 perform that action at this time.