loadChildren() does not work as expected

[vikikamath]

First of all thanks for creating this useful module and maintaining it!

I have a lazy route as configured in my app.module like this:

// app.module.ts
const routes: Routes = [
  { path: '', children: [ { path: 'lazy-route',  loadChildren: '../lazy-route/lazy-route.module' } ]
]

I see the following error:

Cannot find module '../lazy-route/lazy-route.module'
Error: Cannot find module '../lazy-route/lazy-route.module'
 at src lazy namespace object:5
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3824)

It may seem like a case of relative path issue but it is not. The same lazy-route module works just fine with ng6 cli or ng5 cli generated apps without custom webpack.config.js

The webpack config is also mostly boilerplate:

{
  entry: { ... },
  modules: {...},
  plugins: [
    new AngularCompilerPlugin({...}),
    new HtmlWebpackPlugin({...})
  ]
}

I have created an example app for your reference. The only difference between this stackblitz project and my ng-cli project is, in the ng-cli project I use custom webpack config.

Also here's my node/npm/angular setup

    _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.3
Node: 8.9.3
OS: darwin x64
Angular: 6.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.3
@angular-devkit/build-angular     0.7.3
@angular-devkit/build-optimizer   0.7.3
@angular-devkit/build-webpack     0.7.3
@angular-devkit/core              0.7.3
@angular-devkit/schematics        0.7.3
@angular/cdk                      6.4.3
@angular/cli                      6.1.3
@angular/material                 6.4.3
@ngtools/webpack                  6.1.3
@schematics/angular               0.7.3
@schematics/update                0.7.3
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.16.5

Looking forward to any help here

[just-jeb]

I haven't seen your custom webpack config, but my first guess would be that you're configuring the replaced plugins wrong.
When you are replacing plugin, it means you have to specify the original Angular configuration + your changes (because it would totally replace the original plugin.
Thus, for the original configuration of AngularCompilerPlugin you can look here.
For the original html plugin configuration look here.

Perhaps this is not the best behavior, but that was the required minimum. Would it be helpful if your plugins configuration would have been merged with the original instead of replacing it? Should such an option be turned on by default? Should it be configurable per plugin or general?

If this is indeed the case we can continue the discussion in a separate feature request.
If this is not the case, I'd kindly ask you to create a minimal reproduction case for me to investigate (with custom webpack config).

Thanks for using the lib!

[vikikamath]

@meltedspark thanks for your prompt response and inputs.

I don't believe this is a angular-cli-builders issue. My webpack config had a ContextReplacementPlugin config that was causing this error:

// webpack.config.js
new ContextReplacementPlugin(
      /(.+)?angular(\\|\/)core(.+)?/,
      path.resolve(__dirname, '../src')
    ),

I removed the above config.
Also, I kept the angular.json as per documentation:

...
"architect": {
        "build": {
          "builder": "@angular-cli-builders:custom-webpack-browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
...

Thanks for your time!