@angular-devkit/[email protected] - production build not working in IE

[psimonova]

🐞 Bug report

• [ x ] build

Is this a regression?

Yes, the previous version in which this bug was not present was: @angular-devkit/[email protected]

Description

Service with injected NgZone service
ng build -c production build now not working IE

🔬 Minimal Reproduction

tsconfig.json:
compilerOptions.target = es2015
compilerOptions.module = esNext

angular.json:
architect.build.configurations.production.aot = true

🔥 Exception or Error

ERROR TypeError: Unable to get property 'runOutsideAngular' of undefined or null reference

🌍 Your Environment

@angular-devkit/{all}@0.803.20
@angular/{all}@8.03.20
[email protected]

Anything else relevant?
IE 11

[clydin]

Can you provide the full output of executing ng version from within the project?

[psimonova]

Sure @clydin :

Angular CLI: 8.3.20
Node: 10.12.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package Version

@angular-devkit/architect 0.803.20
@angular-devkit/build-angular 0.803.19
@angular-devkit/build-ng-packagr 0.803.20
@angular-devkit/build-optimizer 0.803.19
@angular-devkit/build-webpack 0.803.19
@angular-devkit/core 8.3.20
@angular-devkit/schematics 8.3.20
@angular/cdk 8.2.3
@angular/cli 8.3.20
@angular/material 8.2.3
@angular/pwa 0.803.20
@ngtools/webpack 8.3.19
@schematics/angular 8.3.20
@schematics/update 0.803.20
ng-packagr 5.7.1
rxjs 6.5.3
typescript 3.5.3
webpack 4.39.2

[kumaresan-subramani]

By default in version 8, angular Team enable differential loading for ng build. However for ng test and ng serve we only generate a single ES2015 build which cannot run in IE 11

There are a couple of options that you can do if you want to have ES5 code during serve.

1. Disable differential loading completely, (Not recommended)

You can turn differential loading off by changing the target from es2015 to es5 in your tsconfig.json

2. Have multiple configuration for serve.

Create a new tsconfig tsconfig.es5.json next to tsconfig.app.json with the below contents

{
 "extends": "./tsconfig.app.json",
 "compilerOptions": {
     "target": "es5" 
  }
}

FYI-

#14455 (comment)

[psimonova]

@kumaresan-subramani
Yes I have such set up and ng serve with tsconfig.es5.json works fine for me.
But now ng build with target es2015 not working in IE.

[Trent-Matthias]

IE broke for me as well in my current project, only change was updating the cli from .19 to .20 in the production environment. I rolled back @angular-devkit/build-angular to 0.803.19 and it works again, I'm not injecting NgZone though anywhere.

[clydin]

As this appears to be highly correlated to the specifics of a project, a reproduction would be incredibly helpful to troubleshoot the issue. For anyone with the time and resources, can you provide a reproduction that demonstrates the problem? I attempted to create one from the information contained in the original issue but was unable to trigger the problem.

Also, if possible can you try your projects with the release candidate for 9.0 (currently 9.0.0-rc.5)?

[Trent-Matthias]

So this is only a problem with my large project, I have 2 other ones that do not have this issue. All three have a similar bootstrapping process, I use an external config and fetch it using the APP_INITIALIZER token. My large project has many more services to handle things like logging in, but I'm not doing anything with zones explicitly, the config stuff is the most unique thing my apps are doing.

I spent a good chunk of yesterday playing around and trying to get my large project to work with IE. I tried using 9.0.0-rc5 but was unable to get IE to work using es5 as my target in the tsconfig and using ng serve. I got the other browsers working though on 9.0.0-rc5, but I'm pretty stumped now and not sure what is causing this bug in my one project.

[Wisdomb33r]

I tried to reproduce this IE problem but had no success to find a small reproduction project.
I now have a very small project, which is using NgZone injection in service (for an error service being injected in an ErrorHandler). And this small project seems to run absolutely fine under IE with a 8.3.20 compilation.

I agree this issue is project-specific. The sad thing is I have really no clue what in my thousands of lines of code is trigerring the error I have (which is not the same error message than psimonova, see #16405).

Up to now I could only reproduce the crash with a prod deployment using differential loading, never with ng serve, and not with a smaller project. So the error is located somewhere in a several-million-long line of minified JS...

@clydin Can CLI 9 compile an Angular 8 project (with anything like a -force optional parameter) ? I guess not due to ViewEngine being replaced by Ivy, but still asking.
Now I have a This version of CLI is only compatible with Angular versions 0.0.0 || ^9.0.0-beta || >=9.0.0 <10.0.0, but Angular version 8.2.14 was found instead. error message. And I have no plans to upgrade my entire project before a stable release of Angular 9 (even waiting for the first minor version to avoid early-adopters usual small bugs).

[matt-senseye]

I'm not sure exactly how to reproduce this in a minimal environment yet and can't share my codebase, but if it helps add any context, we saw a similar problem but with a different error - it is as if some kind of polyfill is missing. For us it only affected production builds in IE 11, manifesting itself with errors along the lines of:

Object doesn't support property or method '{....}'

and, perhaps as a consequence of that,
Unable to get property 'map' of undefined or null reference

Downgrading build-angular and angular-cli from 0.803.20 by one patch version fixes it in our case:

"@angular-devkit/build-angular": "0.803.19",
"@angular/cli": "8.3.19"

[RichardMisiak]

My team is having the same issue in both of our applications
Moving from

"@angular-devkit/build-angular": "^0.803.19",
"@angular/cli": "^8.3.19"

to

    "@angular-devkit/build-angular": "^0.803.20",
    "@angular/cli": "^8.3.20",

gives errors in IE.
IE reports

ERROR TypeError: Unable to get property 'init' of undefined or null reference

I'll try to find a minimal reproduction as I can't share the real applications

edit

if it helps the (minified) code that's throwing the error is

var ui = function() {
                    function e(e, t, n, o) {
                        this.elementRef = e, this.styleBuilder = t, this.styler = n, this.marshal = o, this.DIRECTIVE_KEY = "", this.inputs = [], this.mru = {}, this.destroySubject = new a.a, this.styleCache = new Map
                    }
                    return Object.defineProperty(e.prototype, "parentElement", {
                        get: function() {
                            return this.elementRef.nativeElement.parentElement
                        },
                        enumerable: !0,
                        configurable: !0
                    }), Object.defineProperty(e.prototype, "nativeElement", {
                        get: function() {
                            return this.elementRef.nativeElement
                        },
                        enumerable: !0,
                        configurable: !0
                    }), Object.defineProperty(e.prototype, "activatedValue", {
                        get: function() {
                            return this.marshal.getValue(this.nativeElement, this.DIRECTIVE_KEY)
                        },
                        set: function(e) {
                            this.marshal.setValue(this.nativeElement, this.DIRECTIVE_KEY, e, this.marshal.activatedAlias)
                        },
                        enumerable: !0,
                        configurable: !0
                    }), e.prototype.ngOnChanges = function(e) {
                        var t = this;
                        Object.keys(e).forEach((function(n) {
                            if (-1 !== t.inputs.indexOf(n)) {
                                var o = n.split(".").slice(1).join(".");
                                t.setValue(e[n].currentValue, o)
                            }
                        }))
                    }, e.prototype.ngOnDestroy = function() {
                        this.destroySubject.next(), this.destroySubject.complete(), this.marshal.releaseElement(this.nativeElement)
                    }, e.prototype.init = function(e) {
                        void 0 === e && (e = []), this.marshal.init(this.elementRef.nativeElement, this.DIRECTIVE_KEY, this.updateWithValue.bind(this), this.clearStyles.bind(this), e)
---------------------------------------------------------------^

the error is at this.marshal.init

edit 2 could it be related to this issue? angular/angular#31956 we're on the latest beta for flex-layout so it's not the exact same issue

[RichardMisiak]

I did some more digging by looking through the changes in the last release, thankfully there weren't that many
Undoing this change appears to fix the issue for me
574e76e

I don't know what it does or why that fixes it but it's something to do with enabling downlevel iteration that's breaking things

[NoelLH]

Thanks for finding a likely culprit @RichardMisiak!

I was just about to post our public repo in case it's helpful as an example (though the above is most likely more useful now) - https://github.com/thebiggive/donate-frontend

We also have a dependency on @angular/[email protected] so based on the previous comment I'm also wondering if flex could be a factor.

I think we had a couple of different crashes depending on which page the SSR'd app was first loaded with. The /donate/:id route hit the original issue description one with 'runOutsideAngular' if I remember correctly. This is a current example of that route on our staging site (now working in IE11 with the libraries reverted to 0.803.19 as others have done).

[Wisdomb33r]

@RichardMisiak, @NoelLH : No flex-layout lib on my side but crashing on IE. Seems every project has a different error message.

@RichardMisiak Thanks for the digging and finding this commit. It seems related to differential loading, which perfectly explains why the error is only showing after a real production build and never with ng serve.

[pradab-augment]

Even me also faced same issue when i upgrade to angular 8.3.20 version .
I have fixed by editing ts config file target : "es5"

"compilerOptions": {
"target": "es5",
}

[linjie997]

I can confirm the regression.
While in development, with ng serve the issue doesn't happen while running a build, IE throw the error:
Object doesn't support property or method 'some'

I did a downgrade to 8.3.19 and everything is working fine.

[tbunique]

Thank you for recommending a downgrade, I had NO idea what to do to fix this as I couldn't reproduce in local.

Everything works fine in prod now with version 8.3.19

[Trent-Matthias]

OK now my other project has the same bug, so 2 out of the 3 have it. The thing these 2 share in common is that they are relatively old and were generated with an older version of the CLI, then upgraded to 8.

[Trent-Matthias]

I've been tinkering around with this and got one of the 2 broken projects working. The issue with it was a third party community package. This particular one was ngx-quicklink, removing it and upgrading to angular 9 fixes IE. However, if I just remove it and don't upgrade to 9 and stay at 8 I still get the error in IE.

[alan-agius4]

Closes via #16458

[zero-1]

I am still able to repro this issue using these ....

@angular-devkit/architect 0.803.22
@angular-devkit/build-angular 0.803.22
@angular-devkit/build-optimizer 0.803.22
@angular-devkit/build-webpack 0.803.22
@angular-devkit/core 8.3.22
@angular-devkit/schematics 8.3.22
@angular/cli 8.3.22
@ngtools/webpack 8.3.22
@schematics/angular 8.3.22
@schematics/update 0.803.22
rxjs 6.4.0
typescript 3.5.3
webpack 4.39.2

Downgrading to ...
@angular-devkit/build-angular": "0.803.19
@angular/cli: 8.3.19
.... is fixing the problem.

Is anyone else facing the same ?

[johnjosephtigris]

Unable to run npm run build

node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod

This version of CLI is only compatible with Angular versions 0.0.0 || ^9.0.0-beta || >=9.0.0 <10.0.0,
but Angular version 8.0.0 was found instead.

Please visit the link below to find instructions on how to update Angular.
https://update.angular.io/

npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! [email protected] build: node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/sreekanthvr/.npm/_logs/2020-02-09T02_58_55_672Z-debug.log

debug log mentioned below.
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]
6 info lifecycle [email protected]build: [email protected]
7 verbose lifecycle [email protected]build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/sreekanthvr/Downloads/MemberManagement/membershipWeb/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/VMware Fusion.app/Contents/Public:/usr/local/share/dotnet:/.dotnet/tools:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Applications/Xamarin Workbooks.app/Contents/SharedSupport/path-bin:/Users/sreekanthvr/Documents/Development/tools/flutter/bin:/Users/sreekanthvr/Documents/Development/tools/flutter/bin
9 verbose lifecycle [email protected]build: CWD: /Users/sreekanthvr/Downloads/MemberManagement/membershipWeb
10 silly lifecycle [email protected]build: Args: [
10 silly lifecycle '-c',
10 silly lifecycle 'node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod'
10 silly lifecycle ]
11 silly lifecycle [email protected]build: Returned: code: 3 signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod
13 verbose stack Exit status 3
13 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:223:5)
13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:223:5)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/sreekanthvr/Downloads/MemberManagement/membershipWeb
16 verbose Darwin 19.3.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
18 verbose node v12.15.0
19 verbose npm v6.13.4
20 error code ELIFECYCLE
21 error errno 3
22 error [email protected] build: node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod
22 error Exit status 3
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 3, true ]

[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.}