Angular-cli: [Beta.30] AoT can't work with lazy load module

[PoiScript]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Linux openSUSE Tumbleweed

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

@angular/cli: 1.0.0-beta.30
node: 6.9.1
os: linux x64
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/flex-layout: 2.0.0-beta.4
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/platform-server: 2.4.6
@angular/router: 3.4.6
@angular/cli: 1.0.0-beta.30
@angular/compiler-cli: 2.4.6

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

Here is part of my AppRoutingModule

const routes: Routes = [
    {path: 'post', loadChildren: './modules/post#PostModule'},
    {
        path: '', component: HomeComponent, children: [
        {path: '', redirectTo: 'recent', pathMatch: 'full'},
                {path: 'recent', loadChildren: 'app/modules/recent#RecentModule'},
                {path: 'archive', loadChildren: 'app/modules/archive#ArchiveModule'},
                {path: 'category/:title', loadChildren: 'app/modules/category#CategoryModule'},
                {path: 'link', loadChildren: 'app/modules/link#LinkModule'},
                {path: 'about', loadChildren: 'app/modules/about#AboutModule'},
                {path: 'search', loadChildren: 'app/modules/search#SearchModule'}
    ]
    },
]

The log given by the failure.

Normally this include a stack trace and some more information.

When I run ng --prod, I got

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir/app/modules/post/index.ngfactory.ts' in '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir/app/modules/recent/index.ngfactory.ts' in '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir/app/modules/archive/index.ngfactory.ts' in '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir/app/modules/category/index.ngfactory.ts' in '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir/app/modules/link/index.ngfactory.ts' in '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir/app/modules/about/index.ngfactory.ts' in '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./src/$$_gendir async
Module not found: Error: Can't resolve '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir/app/modules/search/index.ngfactory.ts' in '/home/poi/Projects/WebStorm/Solomon/src/$$_gendir'
 @ ./src/$$_gendir async
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

Mention any other details that might be useful.

I know that ng-cli have already supported AoT and lazy load mode. So are there any configure I missed or How should I edit my RouterModule to enable them?

---

Thanks! We'll be in touch soon.

[d3viant0ne]

I've been lazy loading with AOT without issue, just based of what you pasted in you would need to update your routing module to this ....

loadChildren: './relativeToThisFile#ModuleName'

const routes: Routes = [
  { path: 'post', loadChildren: './modules/post#PostModule' },
  {
    path: '', component: HomeComponent, children: [
      { path: '', redirectTo: 'recent', pathMatch: 'full' },
      { path: 'recent', loadChildren: './modules/recent#RecentModule' },
      { path: 'archive', loadChildren: './modules/archive#ArchiveModule' },
      { path: 'category/:title', loadChildren: './modules/category#CategoryModule' },
      { path: 'link', loadChildren: './modules/link#LinkModule' },
      { path: 'about', loadChildren: './modules/about#AboutModule' },
      { path: 'search', loadChildren: './modules/search#SearchModule' }
    ]
  },
]

[PoiScript]

@d3viant0ne thank you for replying, ./modules/recent is actually the relative path of RecentModule.

I added an index.ts in ./modules/recent :

export * from './recent.module'

[d3viant0ne]

The paths are relative to your app-routing.module.ts meaning what you posted above, app/modules/recent#RecentModule isn't going to work.

Your routing module is in ./src/app/app-routing.module.ts assuming a standard CLI project setup.

Meaning you need to loadChildren: relative to the routing module file. Assuming the path ./src/app/modules which is the way your project appears to be structured based on the snippet, you need to modify the paths to what I pasted in above.

If i'm not right about the structure, a screenshot of the directory tree would be helpful. Either way, this is most likely a configuration issue not a bug.

[PoiScript]

I have modified Routes... But nothing happened, ng build --prod still can't work.

Here is my directory tree:

[PoiScript]

Thank! It works! Look like ng-cli doesn't support facade pattern yet.

[d3viant0ne]

Actually I'm betting it was the export * from. If you used a named export, that should probably work

[PoiScript]

Oh, I've already tried that. I modified all modules to to something like this

export {RecentModule} from './recent.module'

But it still can't pass the compilation.

[kamighazi]

So, I've tried all sorts of combos using cli -v 1.0.6 and cli -v 1.1.3. None of it worked.

The only thing that worked for me... Change your child module file name from what-ever.module.ts to index.ts and voila! It's sleazy, but it works.

[JPeer264]

@kamighazi for me it was exactly the opposite. Instead of pointing to index.ts I had to point to what-ever.module.ts. So following broken route:

export const ROUTES: Routes = [
  // here I pointed to the index.ts w/ the exported module
  { path: '', loadChildren: './views/+what-ever-view#WhatEverModule' },
];

changed to the working route:

export const ROUTES: Routes = [
  // here I pointed to the module directly
  { path: '', loadChildren: './views/+what-ever-view/what-ever-view.module#WhatEverModule' },
];

It is a bit strange, as the index.ts file exports the module directly.

Meta:
Angular: 4.3.2
CLI: 1.2.6 (works also with 1.3.0-rc.3)

[mitul69]

Hello,

I am facing same error.

here is my route file.

export const ROUTES: Routes = [
  { path: '',          component : HomeComponent },
  { path: 'login',     component : LoginComponent },
  { path: 'register',  component : RegisterComponent },
  { path: 'user',      loadChildren: './modules/user#UserModule'},
  { path: 'admin',     loadChildren: './modules/admin#AdminModule'},
];

Can you please help me.

[stefdelec]

Any news @mitul69 ?

[ladytellur]

Updating tsconfig-aot.json files section worked for me

"files": [
    "./main-aot.ts",
    "./polyfills.ts",
    "./vendor.ts",
    "./app/LAZY_MODULE1/LAZY_MODULE1.module.ts",
    "./app/LAZY_MODULE2/LAZY_MODULE2.module.ts"
  ]

[angular-automatic-lock-bot[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._}