Solvedangular cli Lazy loading of modules giving error

Hi,

I have upgraded to the latest version of Angular CLI - 1.5.4 and Angular 5. I am not able to workout a simple app, which lazily load modules.

Strangely, if I comment some code, the app gets recompiled and works perfectly. Even if I uncomment, what I commented before, it runs smoothly without any error. But if I stop npm and restart my app, I face same issue again.

Is it something at build time?

Angular-CLI - 1.5.4

<!--
ERROR in Error: Could not resolve module src/feature-module-one/feature1.module relative to E:/Build Learn Conquer/tests/testAOTModules/src/app/app.module.ts
    at StaticSymbolResolver.getSymbolByModule (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler\bundles\compiler.umd.js:31884:30)
    at StaticReflector.resolveExternalReference (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler\bundles\compiler.umd.js:30350:62)
    at parseLazyRoute (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler\bundles\compiler.umd.js:28616:55)
    at listLazyRoutes (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler\bundles\compiler.umd.js:28578:36)
    at visitLazyRoute (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler\bundles\compiler.umd.js:29995:47)
    at AotCompiler.listLazyRoutes (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler\bundles\compiler.umd.js:29963:20)
    at AngularCompilerProgram.listLazyRoutes (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler-cli\src\transformers\program.js:157:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@angular\compiler-cli\src\ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:247:66)
    at Promise.resolve.then.then (E:\Build Learn Conquer\tests\testAOTModules\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:538:50)
    at process._tickCallback (internal/process/next_tick.js:103:7)

webpack: Failed to compile.
-->

Repro steps

  • Lazily load an angular module
  • ng serve

Observed behavior

<!-- Normally this includes a stack trace and some more information. -->

Desired behavior

Mention any other details that might be useful (optional)

24 Answers

✔️Accepted Answer

I found the reason of this error.
You should change all lazyload modules in your application like this example (remove .ts):
admin.module.ts#AdminModule => admin.module#AdminModule
If you change only one parent lazyload module (but not syntax of child lazyload modules), you have the same error related to parent module:
Could not resolve module app/admin/admin.module.ts relative to C:/Projects/mean-app/src/app/app-routing.module.ts

But I have a question:
Why after any changes and recompile (not stop and typing ng serve) application will start and work?
I think the error message needs to show in this case also.

Other Answers:

One obvious addition, relative path (to app-routing.module.ts) should start with dot symbol
app/admin/admin.module#AdminModule => ./admin/admin.module#AdminModule

Such form doesn't work
app/admin/admin.module#AdminModule => admin/admin.module#AdminModule

Seeing this same issue on a dead simple app with Angular 6.0.5 and Angular CLI 6.0.8 (used CLI to generate a single feature module with routing and two components within that module, then set up lazy-load routing in app.module.ts).

Changing from an absolute to a relative path fixed the issue for me; if this is the only supported approach, someone should update the official Angular docs, which definitely use absolute paths in the examples!

the current angular 6 doc https://angular.io/guide/lazy-loading-ngmodules#configure-the-routes has the same issue still, and you get the error as well.

need to change:
'app/customers/customers.module#CustomersModule' => './customers/customers.module#CustomersModule'

@filipesilva i think there is a bug at all... Please download that sample - it is almost empty project just to show angular to collegues:
build-lazy-bug.zip

  1. NPM I
  2. Open layout.routing.ts
    `import { ModuleWithProviders } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { LayoutComponent } from '../components';

const layoutRoutes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: 'rooms',
loadChildren: '../../room/room.module#RoomModule'
}
]
}
];

export const layoutRouting: ModuleWithProviders = RouterModule.forChild(layoutRoutes);
`

and try to run / build application (ng serve), there is an error:
ERROR in Could not resolve module ../../room/room.module relative to /D/GIT/angular-empty/src/app/layout/layout.module.ts

JUST resave any file to start rebuild on watch (press ctrl+s):

  • no error
  • works like a charm

I feel like i have encountered this problem like year ago and it is back.

More Issues: