Angular 2 error: feature module/path cannot be found

Question

Dev mode, console error reports that it 'cannot find module user/user.module'

This feature module is lazily loaded in the App's main module routes, still the error keeps screaming at my face. I have tried to dynamically load the child/feature module but I got an error still. I also tried npm cache clean --force, didn't work still. I even restarted my PC! I have also tried other solutions I found on the internet and they didn't work. What am I missing or not paying attention to?!

Project's folder structure:

app
 |- AppModule.ts
 |- routes.ts
 |- and other.ts files
 |- user
    |- user.model.ts
    |- user.module.ts
    |- user.routes.ts

routes.ts contents (please note the /user route/lazy-loading:

import { Routes } from '@angular/router'

export const appRoutes: Routes = [
    { path: 'user', loadChildren: './user/user.module#UserModule'}
]

user.module.ts contents

import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { RouterModule } from '@angular/router'

import { userRoutes } from  './user.routes'

@NgModule({
    imports: [
        CommonModule, 
        RouterModule.forChild(userRoutes),
    ],
    declarations: [
    ],
    providers: [ ]
})

export class UserModule {}

user.routes.ts contents:

import { P } from './p.component'
import { L } from './l.component'

export const userRoutes = [
    { path: 'p', component: P },
    { path: 'l', component: L }
]

Here is the [routerLink] binding in the HTML

<a [routerLink]="['user/l']">Get Help</a>

Full Error:

core.js:14597 ERROR Error: Uncaught (in promise): Error: Cannot find module 'user/user.module'
Error: Cannot find module 'user/user.module'
    at $_lazy_route_resource lazy namespace object:5
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:16156)
    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:16147)
    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:16147)
    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)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

versions:

Angular CLI: 7.1.2
Node: 8.11.2
OS: win32 x64
Angular: 7.1.2

@angular-devkit/architect         0.11.2
@angular-devkit/build-angular     0.11.2
@angular-devkit/build-optimizer   0.11.2
@angular-devkit/build-webpack     0.11.2
@angular-devkit/core              7.1.2
@angular-devkit/schematics        7.1.2
@ngtools/webpack                  7.1.2
@schematics/angular               7.1.2
@schematics/update                0.11.2
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Thank you!

i am asking about angular version not cli version. check in package.json. — Aakash Garg, Dec 27 '20 at 20:59
Please try to post a clean and understandable code. Your code is not really helpful. Also please run `ng --version` from your app root and post all the output. CLI version is not enough. And last but not least, try this: `{ path: 'user', loadChildren: () => import ('./user/user.module').then(m => m.UserModule)` — k.vincent, Dec 28 '20 at 07:42
@k.vincent, I got an error while trying to implement your suggestion: _ERROR in src/app/routes.ts(20,41): error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'._ — paranorman_einstein, Jan 01 '21 at 20:50
**Update**: while trying to debug the issue, I added another feature to the app via lazy-loading: files compiles just fine (at least, that's what the CLI informs me), yet I got the same error that the feature module is missing! I checked and rechecked, and I do not think I have a problem with my file paths. I think angular is not compiling the feature modules. Is there a way for me to force angular to recompile from the scratch? — paranorman_einstein, Jan 03 '21 at 20:10
As I said, please change `routes.ts` to: `{ path: 'user', loadChildren: () => import ('./user/user.module').then(m => m.UserModule)` — k.vincent, Jan 04 '21 at 11:02
@k.vincent, please note that I tried your suggestion and got an error (just as I stated in your mention above: _error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'_, and got a clue from [link](https://stackoverflow.com/questions/56375703/angular-8-lazy-loading-modules-error-ts1323-dynamic-import-is-only-supporte).. Thank you for your selflessness and time. — paranorman_einstein, Jan 07 '21 at 20:15

Angular 2 error: feature module/path cannot be found

0 Answers0