Can't resolve lazy loaded module in Angular AOT build

Question

I'm not using Angular CLI for my AOT builds, and am using Angular 4.x. I have created a module which I intend to load as a lazily loaded module. Here is the file project partial structure:

- app
  |----lazyLoadedModuleFolder
  |           |
  |            --- componentsFolder
  |            --- lazyload.module.ts
  |
  |-----main.aot.ts

In my main.aot.ts file, which is used for my AOT builds, I have:

import { MyAppLicationModuleNgFactory } from './../aot/src/MyApplicationModule.module.ngfactory';

import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';


if (webpack.ENV === 'production') {
  enableProdMode();
}

platformBrowser().bootstrapModuleFactory( MyAppLicationModuleNgFactory);

In my routing configuration I have the following for the lazily loaded module:

const appRoutes: Routes = [
...

  { path: 'myapp/lazyLoadView', loadChildren: './app/lazyLoadedModuleFolder/lazyload.module'}

];

In my lazyload.module.ts file I'm exporting the following class:

export default class lazyLoadModule {

}

When I run the JIT build, everything works fine, however, when I run the AOT build, I get the following error:

Can't resolve '.\app\lazyLoadedModuleFolder\lazyload.module'

If I don't use lazy loading (converting the module to an eagerly loaded module), everything works fine.

Here is my tsconfig.aot.json which is used for aot builds:

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noEmit": true,
        "module": "es2015",
        "sourceMap": true,
        "target": "es5",
        "types": ["es6-shim", "jasmine"],
        "noImplicitAny": true,
        "allowJs": true,
        "removeComments": false,
        "suppressImplicitAnyIndexErrors": true,
        "moduleResolution": "node",
        "lib": ["es2015", "es2015.iterable", "dom"],
        "skipLibCheck": true

    },

    "files": [
        "src/main.ts",
        "src/main.aot.ts",
        "src/app/lazyLoadedModuleFolder/lazyload.module.ts",
        "src/typings.d.ts"
    ],

    "angularCompilerOptions": {
        "genDir": "aot",
        "skipMetadataEmit": true
    }

}

Also, I am using the following loader in my webpack.config file for my AOT builds:

{ loader: 'angular2-template-loader' }

So I'm wondering why my AOT build does not work when I'm using lazy loading, but works just fine when I'm not using the module as a lazy loaded module.

Thank you in advance for your help.

after hours of troubles i found out a solution that works. https://stackoverflow.com/a/58681520 — andrea simeoni, Nov 03 '19 at 17:46

score 0 · Answer 1 · answered Feb 02 '18 at 16:58

0

Aside from compiling ahead of time, the AOT also checks for your files for errors and it looks like you need to change your path to:

{ path: 'myapp/lazyLoadView', loadChildren: './app/lazyLoadedModuleFolder/lazyload.module#LazyLoadModule'}

as you need to specify the module name after file name + '#'.

answered Feb 02 '18 at 16:58

Uğur Dinç

2,415
1
18
25

Thanks for the response but that is not it. I'm exporting the class using the keyword "default" in which case I do not need to specify the name of the class in the route, using the "#" separator. – Sean12 Feb 02 '18 at 17:07
@Sean12 Did you try using absolute path instead of relative? – Uğur Dinç Feb 02 '18 at 21:28

Can't resolve lazy loaded module in Angular AOT build

1 Answers1