Angular2 + Webpack2 + Express + HMR + Lazy Loaded Modules

Has anyone ever got a lazy module to work using Webpack2 for a package provider? I feel like I'm going crazy.

I am using Visual Studio Code to compile TS files into JS files, before bundling them with Webpack2.

I have tried the following simple examples showing lazy loading of modules with angular2 routing, for example:

{ path: 'feature', loadChildren: './+feature/feature.module#FeatureModule' }

      

        
        
        
      

    

This apartment does not work. I've tried every combination of tricks I can think of, including:

• Every permutation. /, /, just '+ feature', etc.
• Create a package called "feature-module" (via an entry in my webpack config) and tried permutations on that

This always results in a "module not found" error in the console when activating the function route.

I've tried a hack I gugub that requires the use of a very questionable syntax, for example:

{ path: 'feature', loadChildren: ()=> new Promise(resolve => (require as any).ensure([], require => resolve(require('./+feature/feature.module).FeatureModule))) }

      

        
        
        
      

    

This does work in the sense that it will load the module when a route is requested and display it in the browser as expected.

However, the main reason I wanted to use webpack is hot reloading.

I am using express server instead of webpack-dev-server (for example I am using webpack-dev-middleware and webpack-hot-middleware in express). I don't know what it matters, but I thought I mentioned it.

The result obtained with the lambda forChildren hack is that although the page renders for the first time, when I make subsequent changes and save, I can see that my webpack packages are recreated (correct - this is the hot behavior I am looking for ). The lambda executes a second time to reload the module (also correct, I suppose, although it's impossible to tell, because the internals of Angular are a maze of sewer pipes). It should I guess that the effect of reloading the module (or more aptly connecting to the desktop of the HMR webpack that handles these requests in the browser) ... but instead it fails with the "Duplicate module registered" error.

When I don't use lazy loading, everything works completely as expected. My function modules are loaded when their routes are hit, my subcomponent components work as designed, and if I modify any of my components, be it in the top level module or any of the functional modules or their components, webpack does exactly what I expect. and updates the HTML (or css or script, or whatever, hot reload thanks to my change).

I have seen several examples that claim to work, but they are all slightly different from each other, for example:

• instead of pre-compiling TS files, they use the TS loaders in webpack (why would you do that?)
• They are using webpack-dev-server (not sure if this matters?)
• They do lazy loading but don't use webpack
• Their examples are from RC-n or beta-N, which are not like the current angular2
• This is @angularClass. Not to cast a shadow, and their github "boiler plate" is not what I would call "minimal".
• Their examples are just snippets from one line out of context (like what I've provided so far, I know).

I guess I'm just hoping that someone has an example of a script similar to mine in the github repository, somewhere they can point me to something I can learn and try to reproduce. This is the hardest technical problem I have ever faced in my professional career (about 12 years).