Angular-cli: LoadChildren - lazy loaded routes and relative path problems

[montella1507]

Bug Report or Feature Request (mark with an x)

• [x] bug report

Command (mark with an x)

• [x] build
• [x ] serve

Versions

NPM 6.2.0
Node v10.9.0
Angular CLI: 6.0.8
Node: 10.9.0
OS: win32 x64
Angular: 6.1.4

Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cli 6.0.8
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.2
typescript 2.7.2
webpack 4.8.3

Repro steps

1) To simulate this you have to download source code here (because stackblitz cannot even generate working, ready to download solutions...):
load-children-issue.zip

2) NG serve = error:
ERROR in Could not resolve module ../../room/room.module relative to /D/GIT/angular-empty/bara2/src/app/layout/layout.module.ts

if you check layout.module.ts, routing is imported via index.ts files - importing layoutRouting (layout.routing.ts)

BUt it works when you resave anything (when project is rebuilt on watch. )

Check this picture please:

Expected behavior

There should be no problem with index.ts files regarding the relative path in loadChildren.

Desired functionality

LoadChildren relative path shoudl work regardless the folder "deepness"

Mention any other details that might be useful

[filipesilva]

That /D/GIT/angular-empty/...... path makes me think we have a bad path conversion somewhere.

We should also be consistent in these build errors: it should happen on both builds and rebuilds and not just one of these.

[sakkce]

I had same problem. Fixed it by moving RouterModule.forRoot(mainRoutes) from AppRoutingModule to AppModule imports (and removing AppRoutingModule from AppModule imports).

[montella1507]

Yeah. Same here, but it should not be ignored (this bug)

[alan-agius4]

I have looked into this and the build should fail. Because lazy loaded routes are relative to the module were they are register not the const file.

In your case the correct relative path should be ../room/room.module

That said, I am going to leave this open so that we look into why the error message is not always displayed.

[montella1507]

@alan-agius4 well.. then you are able to build that but it will throw error when navigated in browser i think ;-)

[alan-agius4]

@montella1507 It works in the browser

[montella1507]

@alan-agius4 @filipesilva can we add that very important information (relative to module, not file) to documentation ?

[chrillewoodz]

@alan-agius4 So why does this work in Angular 5 and 6 but now all of a sudden it gives error?

loadChildren: 'app/routes/settings/settings.module#SettingsModule'

Surely you should be able to specify it from the root of your project?

[clydin]

Non-relative paths will be evaluated from the tsconfig’s baseUrl.

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