Cannot find module './sections/lazy/lazy.module.ngfactory' Error in Angular 2 Webpack + AOT setup

Question

I have been trying for a while to get a lazy loaded module to work in a simple AOT + Webpack Angular 2 setup.

Here are my core settings, if anything else is useful to create more context please let me know and I will update the question.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["dom", "es6"],
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "outDir": "build/tmp",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "node",
      "jasmine"
    ]
  },
  "exclude": [
    "build",
    "dist",
    "node_modules",
    "src/main.aot.ts",
    "tmp"
  ],
  "angularCompilerOptions": {
    "debug": true,
    "genDir": "build",
    "skipMetadataEmit": true
  },
  "compileOnSave": false,
  "buildOnSave": false
}

app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
  { path: 'lazy', loadChildren: './sections/lazy/lazy.module#RecipesModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

webpack.prod.js

// ...
module: {
  rules: [
    {
      test: /\.ts$/,
      loader: '@ngtools/webpack',
    }
  ]
}
// ...
plugins: [
  // ...
  new AotPlugin({
    tsConfigPath: './tsconfig.json',
    entryModule: helpers.root('src/app/app.module#AppModule')
  }),
  // ...
]
// ...

The build process completes without any problem but the error Error: Uncaught (in promise): Error: Cannot find module './sections/lazy/lazy.module.ngfactory'. occurs when I try to navigate to the /lazy url.

Also running the app in development/JIT works without any issue.

Do you spot any problem?

Thanks

Answer 1

I solved the problem by removing ContextReplacementPlugin I was using on my webpack build.

I had the following plugin entry in my webpack.config file that was causing the issue:

// Workaround for angular/angular#11580
new ContextReplacementPlugin(
  // The (\\|\/) piece accounts for path separators in *nix and Windows
  // https://github.com/angular/angular.io/issues/3514
  /angular(\\|\/)core(\\|\/)@angular/,
  helpers.root('src'), // location of your src
  {} // a map of your routes
),

My project configuration was based on the angular-starter repo and I was probably not using the ContextReplacementPlugin plugin correctly.