ng build --prod fails with "o.JitCompilerFactory is not a constructor"

[beneschmidt]

Bug Report or Feature Request (mark with an x)

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

Versions.

Angular CLI: 1.5.0
Node: 6.10.0
OS: win32 x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.4.2
webpack: 3.8.1

Repro steps.

Just switched to version 1.5 with Angular 5 while trying to rebuild the app, trying to run ng build --prod. The build itself works fine, no error occurs in the cli, just the produced output is not working in the browser anymore. Here's the build output (with build-optimizer enabled)

$ ng build --prod
Time: 122549ms
chunk {0} polyfills.5be7b4440c7063a52728.bundle.js (polyfills) 65.8 kB [initial] [rendered]
chunk {1} main.0b8a07797f45da90c346.bundle.js (main) 1.59 MB [initial] [rendered]
chunk {2} styles.81bdc1589614d677343f.bundle.css (styles) 222 kB [initial] [rendered]
chunk {3} inline.022aa018a8a39e60af21.bundle.js (inline) 1.45 kB [entry] [rendered]

I also tried removing the build-optimizer ng build --prod --build-optimizer false, still the same problem in the browser.
If I don't build it with the --prod flag, everything is working fine. So I guess this has something to do with the --prod flag.

The log given by the failure.

Here's what the browser tells me directly on loading the page.

Uncaught TypeError: o.JitCompilerFactory is not a constructor
    at l (main.0b8a07797f45da90c346.bundle.js:1)
    at Je (main.0b8a07797f45da90c346.bundle.js:1)
    at Ye (main.0b8a07797f45da90c346.bundle.js:1)
    at Ze (main.0b8a07797f45da90c346.bundle.js:1)
    at new t (main.0b8a07797f45da90c346.bundle.js:1)
    at Object._n [as createNgModuleRef] (main.0b8a07797f45da90c346.bundle.js:1)
    at e.create (main.0b8a07797f45da90c346.bundle.js:1)
    at main.0b8a07797f45da90c346.bundle.js:1
    at e.invoke (polyfills.5be7b4440c7063a52728.bundle.js:1)
    at Object.onInvoke (main.0b8a07797f45da90c346.bundle.js:1)

Desired functionality.

Production build app working in the browser again.

Mention any other details that might be useful.

[beneschmidt]

After some more research I found out that the problem occured from a library called "ng2-busy" which is currently not suited for angular 5, therefore closing this issue.

[lincolnthree]

@beneschmidt - how did you figure out which module was causing the issue? Is there a better way other than gutting literally all of your code module by module? I'm having this issue in my code.

[lincolnthree]

Also how did you solve the issue?

[beneschmidt]

Actually I just got lucky. I kept searching for the error with a slightly different search phrase (in this case I only searched for JitCompilerFactory is not a constructor without the stack trace start) and found someone with the exact same problem, who somehow found out which module was causing it. I solved it by just removing the library completely and replacing it by a more frequently updated one, that does pretty much the same.

The library that was causing this error was not updated for 8 months now, which is probably why it failed with the newest angular version. So if you're sure that the error is caused by a library that you include, you could check for the latest versions of your libraries and see which one was not updated frequently.

What error message do you get?

[lincolnthree]

Looks like I just got lucky, too. In production, I got e is not a constructor but running the prod build locally randomly showed me v.InjectionToken is not a constructor ONCE out of a billion trials I ran, so I searched for that in all my modules and found one that used it. Copied all the sources to my project, removed the injection token code (I didn't need it,) and it worked.... what a joy!

[lincolnthree]

Thanks for the follow-up, btw! I really appreciate it.

[beneschmidt]

Yeah it seems that some errors only occur when build with aot which unfortunately means the code is minified and uglified and whatsoever, but in dev build everything works fine, this can be nerve wrecking.

But I'm glad you found what was messing up your build =) this may also be useful for others having a similar problem.

[antonkrugerTA]

I solved it by just removing the library completely and replacing it by a more frequently updated one, that does pretty much the same.

@beneschmidt I am having the same issue. Can you please tell me which library you replaced n2-busy with?

[beneschmidt]

I'm currently using ngx-loading, which is a bit different regarding the usage. But I've noticed that there is a new version of ng2-busy implemented by someone else, although I haven't checked it out yet, so no idea if it's working properly.

[iftikharkhan89]

I got this error while building for production, after I upgraded Angular version from 2 to 5. The reason of this error was angular2-busy
I removed this module from my project, since I was already using PrimeNg spinner. After removing angular2-busy module, everything is working for production build ng build --prod

[ckailash30]

i got the same type of error "TypeError: o is not a constructor" in angular 6 but there is not any ng-busy module to cause this problem, so anybody can suggest me how to solve this

[beneschmidt]

i got the same type of error "TypeError: o is not a constructor" in angular 6 but there is not any ng-busy module to cause this problem, so anybody can suggest me how to solve this

Well this could be pretty much anything. Is the problem only occurring after switching to angular 6? My first guess would be that there's a module included in your project, that is not suited for the current angular version. Depending on how many external modules you included, you can find out pretty easy which ones are not updated for version 6 by just building the project. These modules will complain about not finding the right angular version for themselves (UNMET PEER DEPENDENCY).

Also is this problem only occurring when building with the build-optimizer or have you tried switching it off once to see if it works then?

[ckailash30]

I made this APP only in angular 6 not switched from older versions, and all modules updated according to version-6 so there is not any UNMET PEER DEPENDENCY showing.

And for building the project i use this cli command- 'ng build --prod'

And the given error only showing on run time in production mode, when i 'm opens a map to see coordinates by using agm-map. Except this whole project running successfully
But in development mode not showing any single issue.

[beneschmidt]

so I suppose this is the agm-map you are using. Which version are you currently using? I recommend to update it to the newest version (which should be 1.0.0-beta.3). The problem with prod mode is that there's a lot of optimization running that minimizes code and throws away unnecessary stuff. The dev mode however keeps your code pretty much as it is (which usually results in very big bundles). Version 6 of angular made some big changes at the compiler side, using new typescript and rxjs versions and so on, and some modules of course struggle to be up to date with it, therefore sometimes resulting in some compiler errors.