NgModule entryComponents shaked out of the production bundle

[matheo]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Versions.

@angular/cli: 1.0.0
node: 7.6.0
os: linux x64
@angular/animations: 4.0.1
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Ubuntu 16.04

Repro steps.

I just followed the example on Dynamic Component Loading, and it says:

If your app happens to bootstrap or dynamically load a component by type in some other manner, you must add it to entryComponents explicitly.

In order to ensure that the compiler will still generate a factory, dynamically loaded components have to be added to their NgModule's entryComponents array.

So, building the App should work, but it doesn't:

> Error: No component factory found for undefined. Did you add it to @NgModule.entryComponents?

The log given by the failure.

I have an initial state defined like:

const initial: WizardState = {
  component: InitialStepComponent
}

but after the tree shaking it becomes something like:

const initial: WizardState = {
  component: undefined
}

and throws:

ERROR Error: No component factory found for undefined. Did you add it to @NgModule.entryComponents?
    at y (polyfills.563dbf3….bundle.js:36)
    at J (vendor.e44d5ed….bundle.js:225)
    at t.resolveComponentFactory (vendor.e44d5ed….bundle.js:365)
    at t.resolveComponentFactory (vendor.e44d5ed….bundle.js:365)
    at main.630b622….bundle.js:1
    at t.invokeTask (polyfills.563dbf3….bundle.js:36)
    at Object.onInvokeTask (vendor.e44d5ed….bundle.js:365)
    at t.invokeTask (polyfills.563dbf3….bundle.js:36)
    at e.runTask (polyfills.563dbf3….bundle.js:36)
    at invoke (polyfills.563dbf3….bundle.js:36)
    at n (polyfills.563dbf3….bundle.js:15)

Desired functionality.

Building an app with dynamic components loading ok after tree-shaking.

Mention any other details that might be useful.

Note that I'm not using string component names as in #2965.
I'm using the Type and I've built a repo to demo that production builds doesn't work:

https://github.com/matheo/ng-dynacomponents

Dev build: https://matheo.github.io/ng-dynacomponents/dev/ (works)
Production: https://matheo.github.io/ng-dynacomponents/prod/ (broken)

Thanks in advance for any tip!
cc @filipesilva

[litzebauer]

I'm experiencing the same issue

[matheo]

This seems like a CLI issue only, because after follow the AoT Instructions and fix some Rollup issues I got my App working with no problem and 8Mb less :)

[matheo]

Additionally, I've tried to ng serve my working AoT app with no luck due to the same issue. The rollup way is the only way working for me to not shake out my dynamic components.

I'm working with i18n too, and the --aot --i18nFile src/locale/messages.en-us.xlf --i18nFormat xlf --locale en-us compiles fine, but breaks again when I try to load a component on my NgModule.entryComponents. Any tip @filipesilva please?

[lightheaded]

Is this getting any attention or are there any workarounds? I'm quite paralysed by this bug unfortunately in one of my projects :(

[lauriliivamagi]

Having the same issue here. For the time being, one can only use AoT (without tree shaking, minification, file name hashing that -prod additionally gives) like this: ng build -aot. That's, of course, way better than just ng build.
Looking forward to the -prod working with entryComponents or tips how to make it work. Thanks!

[glebsts]

Same here. @filipesilva any chance that will be fixed in nearest future? Thank you.

[filipesilva]

Heya all, sorry it took so long to get a reply to this. I'm not sure what's happening but we will investigate.

Sounds like a bug if it works with --aot but not with --prod.

[sumitarora]

@matheo @lauriliivamagi @glebsts Seems to be issue with UglifyJsPlugin webpack plugin. Removing that and running the prod build works fine. It doesn;t seems to be resolving an instance of the component properly.

[matheo]

@sumitarora Seems that you found it, maybe some option of UglifyJs can prevent this? hope so

[lauriliivamagi]

Just a wild guess: could it be related to #1644 and the keep_fnames option of UglifyJsPlugin?

[sumitarora]

@lauriliivamagi It is related to mangle option of UglifyJsPlugin. I will check keep_fnames and see if it fixes the issue too.

[jstoppa]

we are having the same issue. @sumitarora How do you remove the UglifyJsPlugin from the Angular CLI build?

[peterfeddo]

I had this issue occurring with the exact same architecture. The only workaround was to hack/disable UglifyJS on the build but that is not an ideal solution. Definitely need to figure out a way to make working uglified code.

[Isterius]

Same here, guys. I've just disabled Uglify Plugin and everything works just fine. I can live without it for a while, but hope you'll be able to fix this bug.

[filipesilva]

Heya all, I've had some time to look at the repro @matheo provided and am sorry to say that the root of the problem was exactly the same as in #2965 (comment) (and later #6454 (comment)): you were relying on the name property of a function. Please see those two comments for explanations of why that's problematic with uglification.

Here is a fix for the example you provided: https://github.com/filipesilva/ng-dynacomponents/commit/711caf59440dc90830b1e26bf1a9677d6ee86da3

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