AOT lazy loading: Error: Cannot find module

[IAMtheIAM]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Output from: ng --version.
angular-cli: 1.0.0-beta.10
node: 6.10.0
os: win32 x64

Repro steps.

build using ngc, then compile angular using aot. Run app. try to visit lazy loaded module path.

The log given by the failure.

app.bundle.js?8609335…:140 ERROR Error: Uncaught (in promise): Error: Cannot find module '../+subscriber/subscriber.module.ngfactory'.
Error: Cannot find module '../+subscriber/subscriber.module.ngfactory'.
    at vendors.dll.js?8609335…:1
    at new ZoneAwarePromise (app.bundle.js?8609335…:147)
    at n (vendors.dll.js?8609335…:1)
    at t.loadFactory (vendors.dll.js?8609335…:1)
    at t.load (vendors.dll.js?8609335…:1)
    at t.loadModuleFactory (vendors.dll.js?8609335…:1)
    at t.load (vendors.dll.js?8609335…:1)
    at e.project (vendors.dll.js?8609335…:1)
    at e._tryNext (vendors.dll.js?8609335…:1)
    at e._next (vendors.dll.js?8609335…:1)
    at vendors.dll.js?8609335…:1
    at new ZoneAwarePromise (app.bundle.js?8609335…:147)
    at n (vendors.dll.js?8609335…:1)
    at t.loadFactory (vendors.dll.js?8609335…:1)
    at t.load (vendors.dll.js?8609335…:1)
    at t.loadModuleFactory (vendors.dll.js?8609335…:1)
    at t.load (vendors.dll.js?8609335…:1)
    at e.project (vendors.dll.js?8609335…:1)
    at e._tryNext (vendors.dll.js?8609335…:1)
    at e._next (vendors.dll.js?8609335…:1)
    at resolvePromise (app.bundle.js?8609335…:147)
    at resolvePromise (app.bundle.js?8609335…:147)
    at app.bundle.js?8609335…:147
    at ZoneDelegate.invokeTask (app.bundle.js?8609335…:140)
    at Object.onInvokeTask (vendors.dll.js?8609335…:1)
    at ZoneDelegate.invokeTask (app.bundle.js?8609335…:140)
    at Zone.runTask (app.bundle.js?8609335…:140)
    at drainMicroTaskQueue (app.bundle.js?8609335…:140)
    at HTMLDocument.ZoneTask.invoke (app.bundle.js?8609335…:140)

Here is my app.routes.ts

export const ROUTES: Routes = [{
   path: '',
   redirectTo: 'subscriber',
   pathMatch: 'full'
}, {
   path: 'subscriber',
   loadChildren: '../+subscriber/subscriber.module#SubscriberModule', // activate lazy loading for this module
}, {
   path: 'login',
   component: LoginComponent
}, {
   path: '**',
   component: NotFound404Component
}, {
   path: '404',
   component: NotFound404Component
}];

Tsconfig.aot.json

{
   "compilerOptions": {
      "target": "es5",
      "noStrictGenericChecks": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "allowSyntheticDefaultImports": false,
      "noEmitHelpers": true,
      "pretty": true,
      "sourceMap": true,
      "strictNullChecks": false,
      "baseUrl": ".",
      "sourceRoot": ".",
      "lib": [
         "es6",
         "dom"
      ],
      "types": [
         "hammerjs",
         "node",
         "source-map",
         "materialize-css",
         "jquery"
      ],
      "typeRoots": [
         "./node_modules/@types"
      ],
      "outDir": "./compiled/src"
   },
   "exclude": [
      "./node_modules",
      "./**/*.e2e.ts",
      "./**/*.spec.ts"
   ],
   "awesomeTypescriptLoaderOptions": {
      "useWebpackText": true,
      "forkChecker": true,
      "useCache": true
   },
   "compileOnSave": false,
   "buildOnSave": false,
   "atom": {
      "rewriteTsconfig": false
   },
   "angularCompilerOptions": {
      "genDir": "./compiled/aot",
      "debug": true
   }
}

webpack config

         {
            test: /\.ts$/,
            include: [helpers.paths.appRoot, helpers.root('./compiled/aot')],
            exclude: [/\.(spec|e2e)\.ts$/],
            use: '@ngtools/webpack';
         },

      /**
       * Webpack plugin that AoT compiles your Angular components and modules.
       */
      new ngtools.AotPlugin({
         tsConfigPath: path.join(process.cwd(), './tsconfig.aot.json'),
         entryModule: path.join(process.cwd(), './src/app-components/app/app.module#AppModule'),
         genDir: path.join(process.cwd(), "./compiled/aot"),

      }),

Regular routes work fine, but lazy route cannot find the module. Path is correct relative to app.routes.ts

[ndcunningham]

related to: #2452 maybe ?

[MovGP0]

I tried two Webpack configurations: one with AOT and one without. Still getting the same error. So I don't know if this is really an AOT issue.

[x00]

I report this also, android build.

[MovGP0]

I fixed it in my codebase, but it is probably a different error: had a link to the same entryModule in both, the server and client build.

[MovGP0]

also missed a warning in the build, which I fixed using the following plugin:

plugins: [
    new webpack.ContextReplacementPlugin(/angular(\\|\/)core/, path.join(__dirname, 'app'), {}),
    // ...
]

not sure if this helps in your case or not.

[danielmhair]

@MovGP0 is that resolving this warning? I'm asking, because I have this same issue with paths not resolving in my lazy modules, so I'm wondering if that is the issue.

WARNING in ./node_modules/@angular/core/fesm5/core.js
4868:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/@angular/core/fesm5/core.js
4880:15-102 Critical dependency: the request of a dependency is an expression

If so, I'm getting it. Is there something I need to do to remove that warning in my app? If so, where do I put that?

[mgechev]

Is this still reproducible?

[mgechev]

Closing the issue due to inactivity. If the problem still exists in the latest version of the CLI, please open a new issue following the template and providing a minimal demo where we can reproduce it. Thanks! :-)

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