the lazy routing works well in most situations, but one failed

[melodybabee]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

I use lazy routing in many components, and they all work well. However, in the management component, the terminal says it cannot find the management component. Only in this case.

Description

A clear and concise description of the problem...

I definitely have a routing path and the management component but cannot go to the right path.

🔬 Minimal Reproduction

Restart and check my path for many times.
Check both the app-routing.modules.ts and along with other components using the lazy loading.

🔥 Exception or Error

the error message:

core.js:12501 ERROR Error: Uncaught (in promise): Error: Cannot find module './management/management.module'
Error: Cannot find module './management/management.module'
    at $_lazy_route_resource lazy namespace object:23
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:14060)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:14051)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:14051)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
defaultErrorLogger @ core.js:12501
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:12549
next @ core.js:14528
schedulerFn @ core.js:10238
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:10222
(anonymous) @ core.js:14082
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:14019
onHandleError @ core.js:14082
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:677
api.microtaskDrainDone @ zone.js:686
drainMicroTaskQueue @ zone.js:602
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:14560
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:83
0 @ main.ts:12
__webpack_require__ @ bootstrap:83
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1

My code in app-routing.modules.ts:

const routes: Routes = [
  { path: 'dashboard',  loadChildren: './dashboard/dashboard.module#DashboardModule' },
  { path: 'course', loadChildren: './course/course.module#CourseModule' },
  { path: 'management', loadChildren: './management/management.module#ManagementModule' },
  { path: 'user', loadChildren: './user/user.module#UserModule'},
  { path: '', component: WelcomeComponent },
  { path: '**', component: PageNotFoundComponent}
];

My code in management-routing.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ManagementDetailComponent } from './management-detail/management-detail.component';

const routes: Routes = [
  { path: '', component: ManagementDetailComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ManagementRoutingModule { }

🌍 Your Environment

Angular CLI: 7.3.8
Node: 10.15.3
OS: win32 x64
Angular:
...

Package Version

@angular-devkit/architect 0.13.8
@angular-devkit/core 7.3.8
@angular-devkit/schematics 7.3.8
@schematics/angular 7.3.8
@schematics/update 0.13.8
rxjs 6.3.3
typescript 3.2.4

Anything else relevant?

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[melodybabee]

https://github.com/melodybabee/repro-angular-app

I have uploaded the client-side code and the problem happens on src/app/app-routing.module.ts line 9, that I can not get the page of localhost:4200/management, together with the URL beginning with localhost:4200/management.

[mix5003]

i think it because you use incorrect file name
i clone your repo and can not build it

i found that management.modules.ts has an extra s after module, so just rename it to management.module.ts and try agian

[filipesilva]

I followed these steps (with :

npm i -g @angular/cli@8.0.0
git clone https://github.com/melodybabee/repro-angular-app
cd repro-angular-app
npm i
ng update @angular/cli @angular/core
ng serve

At this point I saw this build error:

kamik@RED-X1C6 MINGW64 /d/sandbox/repro-angular-app (master)
$ ng serve
                                                                                              
Date: 2019-05-29T10:36:31.901Z
Hash: 9d4ea273349141724e85
Time: 8628ms
chunk {main} main.js, main.js.map (main) 1.88 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 145 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 462 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 327 kB [initial] [rendered]

ERROR in src/app/app-routing.module.ts(9,52): error TS2307: Cannot find module './management/management.module'.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Failed to compile.

This looks correct and shows the problem at build time: Cannot find module './management/management.module'. Like @mix5003 said, the filename is incorrect.

But the error log in @melodybabee's original issue is difference. It is a runtime error, in the browser. I don't see that in this repository. Is something missing in the repro perhaps?