Angular-cli: Uncaught (in promise): TypeError: ctor is not a constructor

[krojew]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Can't tell.

Description

When running an application built in prod mode ng build --prod _some_ components cannot be instantiated because of TypeError: ctor is not a constructor. This is a continuation of https://github.com/angular/angular-cli/issues/9929

🔬 Minimal Reproduction

1. Clone https://github.com/krojew/angular-cli-bug-13540
2. run ng build --prod
3. Launch app in the browser and witness the error.

🔥 Exception or Error

TypeError: ctor is not a constructor
    at createClass (core.js.pre-build-optimizer.js:22052)
    at createDirectiveInstance (core.js.pre-build-optimizer.js:21931)
    at createViewNodes (core.js.pre-build-optimizer.js:23157)
    at callViewAction (core.js.pre-build-optimizer.js:23473)
    at execComponentViewsAction (core.js.pre-build-optimizer.js:23392)
    at createViewNodes (core.js.pre-build-optimizer.js:23185)
    at callViewAction (core.js.pre-build-optimizer.js:23473)
    at execComponentViewsAction (core.js.pre-build-optimizer.js:23392)
    at createViewNodes (core.js.pre-build-optimizer.js:23185)
    at createRootView (core.js.pre-build-optimizer.js:23071)
    at resolvePromise (zone.js.pre-build-optimizer.js:831)
    at resolvePromise (zone.js.pre-build-optimizer.js:788)
    at zone.js.pre-build-optimizer.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js.pre-build-optimizer.js:423)
    at Object.onInvokeTask (core.js.pre-build-optimizer.js:17280)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js.pre-build-optimizer.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js.pre-build-optimizer.js:195)
    at drainMicroTaskQueue (zone.js.pre-build-optimizer.js:601)

🌍 Your Environment

Angular CLI: 7.2.2
Node: 10.15.0
OS: linux x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.2
@angular-devkit/build-angular     0.12.2
@angular-devkit/build-optimizer   0.12.2
@angular-devkit/build-webpack     0.12.2
@angular-devkit/core              7.2.2
@angular-devkit/schematics        7.2.2
@angular/cli                      7.2.2
@ngtools/webpack                  7.2.2
@schematics/angular               7.2.2
@schematics/update                0.12.2
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.28.4

[krojew]

I found components using this package experience this error: https://www.npmjs.com/package/leaflet

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[krojew]

Unfortunately, I cannot reproduce on a minimal setup. Simple component using this package seems to work, so it might be a combination of some things.

Nevertheless, there definitely is an issue there which prevents building in prod mode.

[krojew]

Wrong diagnosis - the issue was with angular-resize-event package in version 0.4.4. Upgrading to 1.0.0 makes the issue go away. Will try to provide a repro repo.

[krojew]

Here you go: https://github.com/krojew/angular-cli-bug-13540

1. run ng build --prod
2. Launch app in the browser and witness the error.

[mgechev]

@krojew thank you for looking into this; it's really helpful! Looking at the commit log of angular-resize-event, looks like 0.4.4 did not support latest Angular.

There are a lot of changes there, hard to trace what exactly fixed the problem, but looks like an issue in angular-resize-events.

Again, thanks for looking into this!

[krojew]

It would be great if Angular managed to catch these error at build time. It's really confusing to have everything working perfectly when developing, just to have it blow up as soon as prod build gets deployed.

[suvarna-tammina]

Still I see the error when I do ng build --prod. All router navigations are working fine but in one component the router navigation is not working and throwing the below error. If anyone could help me please.

[guybi]

@suvarna-tammina +1

[krojew]

@mgechev I just got hit with a this bug on production. Here you have reproduction scenario: https://github.com/angular/angular-cli/issues/9929#issuecomment-490210407 - can somebody take a look?

[mgechev]

@krojew where's the reproduction? I cant find steps in the comment you're pointing to.

[krojew]

@mgechev install angular-resize-event 0.4.4 and it will cause this error when used in prod mode.

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