ANALYZE_FOR_ENTRY_COMPONENTS not working in production to load modules dynamicly

[tamasmonus-cas]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

I am trying to create a module to dynamicly load modules (like the router does). Currently I am able to do so in dev environment, but I couldn't build my project in production. I narrowed down the problem and I found out that the problem is somewhere where I tried to mimic the router's provideRoutes function with adding ANALYZE_FOR_ENTRY_COMPONENTS to my modules providers like this:
providers: [ { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: dynamicModules, multi: true }, { provide: DYNAMIC_MODULE_PATHS, useValue: dynamicModules }, { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }, ModuleLoaderService ]

But I keep getting this error:
Error: Cannot find 'DynamicModule' in '../dynamic/dynamic.module'

And it doesn't matter if I use absolute or relative path.

The strange part is that with ng serve if I re-save the file where I have the providers then it works just fine.

What I could see from the router's source it should work like this, but maybe I'm missing something.

I ignored this for a long time, but now it causes error for me If I try to build for production.

A sample project can be found here:
[https://stackblitz.com/edit/angular-xhhgnk](Sample project)
It will log message into console.

Environment

Angular version: 4.3.4
// I used this version in sample, but I use an older one in real world project

Browser:
- [x ] Chrome (desktop) version 60
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 6.9.2, with most recent ng/cli (but the problem appeared in older version as well)
- Platform:  Windows

[tamasmonus-cas]

I'm back at my work-computer again so I can give the actual error message I got, when try to build for production:
ERROR in chunk main [initial] [name].[chunkhash:20].bundle.js Cannot read property 'module' of undefined TypeError: Cannot read property 'module' of undefined at info.globalScope.through.forEach.reference (C:\Workspace\sdx\platform\web\ng2\v2\node_modules\webpack\lib\optimize\ConcatenatedModule.js:403:36) at Array.forEach (native) at modulesWithInfo.forEach.info (C:\Workspace\sdx\platform\web\ng2\v2\node_modules\webpack\lib\optimize\ConcatenatedModule.js:393:29) at Array.forEach (native) at ConcatenatedModule.source (C:\Workspace\sdx\platform\web\ng2\v2\node_modules\webpack\lib\optimize\ConcatenatedModule.js:392:19) at ModuleTemplate.render (C:\Workspace\sdx\platform\web\ng2\v2\node_modules\webpack\lib\ModuleTemplate.js:14:31) at C:\Workspace\sdx\platform\web\ng2\v2\node_modules\webpack\lib\Template.js:110:28 at Function.from (native) at Chunk.mapModules (C:\Workspace\sdx\platform\web\ng2\v2\node_modules\webpack\lib\Chunk.js:163:16) at ChunkTemplate.renderChunkModules (C:\Workspace\sdx\platform\web\ng2\v2\node_modules\webpack\lib\Template.js:107:26) at ChunkTemplate.render (C:\Workspace\sdx\platform\web\ng2\v2\node_modules\webpack\lib\ChunkTemplate.js:16:30) at Compilation.createChunkAssets (C:\Workspace\sdx\platform\web\ng2\v2\node_modules\webpack\lib\Compilation.js:1256:35) at sealPart2 (C:\Workspace\sdx\platform\web\ng2\v2\node_modules\webpack\lib\Compilation.js:629:10) at next (C:\Workspace\sdx\platform\web\ng2\v2\node_modules\tapable\lib\Tapable.js:202:11) at Compilation.compilation.plugin (C:\Workspace\sdx\platform\web\ng2\v2\node_modules\webpack\lib\ProgressPlugin.js:111:6) at next (C:\Workspace\sdx\platform\web\ng2\v2\node_modules\tapable\lib\Tapable.js:204:14)

[tamasmonus-cas]

Any kind of help, would be much appreciated.

[jasonaden]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[tamasmonus-cas]

I can understand why you can not resolve support issues here, however I'm not really sure that it isn't a bug, because the error message "magically" disappears after I re-save the module where I use 'ANALYZE_FOR_ENTRY_COMPONENTS'. So, altough I am fine ask this on StackOverflow, I think it would be best if someone from angular team could have a look on it. I know this isn't something that is commonly used, but we have to for our task.

If someone is finding this issue and want to chack on stackoverflow question as well, it is here

[tamasmonus-cas]

@jasonaden Can you please revisit, reopen this issue? I am not sure that this is not a bug and I cannot go any further to narrow the problem without any help. Unfortunately, there isn't any response on StackOverflow either.

What I saw on my end is that when I building for debug the paths I give by ANALYZE_FOR_ENTRY_COMPONENTS are not getting into the map found in the source called: $_gendir lazy Thus, when it tries to find the correct path from the map in webpackAsyncContext it gets undefined and throws an error.

If I resave my module where the paths are defined, then everything works fine and the paths are appearing in the map as well.

I can provide the full error message and pictures from my console if that helps anything.

[tamasmonus-cas]

Okay, because nobody helped me I get into this problem again and I found the reason and the solution of my problem.

TL;DR:
If you want to load modules dynamicly you MUST provide your module paths like this:

provide: [
    ...
    { provide: ROUTES, useValue: yourDynamicModuleRoutesArray, multi: true },
    ...
]

And where you want to load, you can just use SystemJsNgModuleLoader (or the abstraction above it NgModuleFactoryLoader) to load the module given by its path.

You can read my concerns and full description below.

The problem is, that you HAVE TO provide the ROUTES injection token from @angular/router package for the compiler to be able to find your module paths and can create a map for its path for webpack. Although, I think it is not really a good solution from angular's side. Because like this you HAVE TO provide the loadChildrens as routes If these modules are not related to any route, then you have to make routes that will not match to anything, but still they will be inside the Routers config, because the compiler and the router uses the same InjectionToken. In My case I didn't want to have these loadChildrens to be present in my routerConfig at all, that's why I created custom ModuleLoader myself, but you just cannot avoid adding the loadChildrens to the Router as well.

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