angular-cli: Lazy loading of modules giving error

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.

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!

@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.

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’

I’m using relative paths, and also have the same issue after upgrading to angular 5

I use relative paths and start with dot symbol but still have got the same problem. Any solution?

I found the reason about this problem. We need to tell the compiler the base directory to resolve non-relative module names. The configuration file tsconfig.app.json is the right place to do that. Open file src/tsconfig.app.json and add a line "baseUrl": "./", to indicate the base directory. This is the final file after I added the new line: { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", "module": "es2015", "types": [] }, "exclude": [ "src/test.ts", "**/*.spec.ts" ] }

@AmebaBrain Thank you.

Working on “@angular/core”: “^6.0.3” and had the same issue as mentioned above everyone.

You just need to change ‘./app/admin/…’ => ‘./admin/admin…’

as mentioned @AmebaBrain app/admin/admin.module#AdminModule => ./admin/admin.module#AdminModule

Can you try using relative paths? At the moment you’re using full paths from the project root and that isn’t really supported.

+1 For app/customers/customers.module#CustomersModule neither ./customers/customers.module#CustomersModule nor src/customers/customers.module#CustomersModule helps

+1