Lazy Loading Angular Modules with router: Error cannot find module

Question

Hey so I am having a very weird issue that I have not run into before when setting up angular routing where when I am trying to lazy load another module, I keep getting this error Error: Cannot find module "app/feed/feed.module"

To start here is my setup

@angular/cli: 6.0.1
@angular/core: 6.0.0
@angular/material: 6.0.1
npm: 6.0.1
node: 10.1.0

Also to note, I have just generated a new angular project after updating all of my global npm packages, so whats listed got updated to that before I ran ng new app-name

Here is my app-routing.module:

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

const rootRoutes: Routes = [
  { path: '', redirectTo: 'feed', pathMatch: 'full' },
  { path: 'feed', loadChildren: 'app/feed/feed.module#FeedModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(rootRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Then in my app.module I am importing this module above:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

And here is the feed-routing.module:

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

import { FeedComponent } from './feed.component';
import { CreatePostComponent } from './create-post/create-post.component';

export const feedRoutes: Routes = [
  {
    path: '',
    component: FeedComponent,
    children: [
      { path: 'create', component: CreatePostComponent }
    ]
  }
];

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

And just as in the app.module I am importing that module in my feed.module:

@NgModule({
  imports: [
    CommonModule,
    FeedRoutingModule
  ],
  declarations: [
    FeedComponent,
    CreatePostComponent
  ]
})

Here is a small image of my explorer in VSCode just to verify I have the modules in the correct place:

I have used this method time and time again and have never seen this error about my second module not being found and wonder if it has anything to do with the updated Angular 6 packages. Any and all help is very appreciated as I would like to lazy load various modules in this project. Thanks in advance!

Not sure if it matters, I usually do `./` without and `app`. Try `./feed/feed.module#FeedModule` — penleychan, May 11 '18 at 02:35
So after messing with the path for a while trying different things, that does work now. It is just misleading when the documentation specifies `app` for the prefix: https://angular.io/guide/lazy-loading-ngmodules#routes-at-the-app-level. Thank you for the comment though, happy to get past this and onto the development! — Nicholas Pesa, May 11 '18 at 02:41
In the Angular 5 version of my application the "app/foo/baa" notation did work. In Angular 6 I had to use the "./foo/baa" notation as recomended by @penleychan for exactly the same setup. Could you please make an answer instead of answering in a comment. — Andreas, Jun 25 '18 at 13:30

score 5 · Accepted Answer · answered Jun 25 '18 at 22:04

For those, you could not get a hang of the answer from the comments above, use the below syntax as specified by @penleychan

As per the documentation, you would end up writing something like this

const rootRoutes: Routes = [
  { path: '', redirectTo: 'feed', pathMatch: 'full' },
  { path: 'feed', loadChildren: 'app/feed/feed.module#FeedModule' }
];

change this to

const rootRoutes: Routes = [
  { path: '', redirectTo: 'feed', pathMatch: 'full' },
  { path: 'feed', loadChildren: './feed/feed.module#FeedModule' }
];

Notice the change in the loadChildren property in both the code samples. If you haven't created your application with the ng-cli, make sure the loadChildren path is relative to the app-routing.module.ts file

score 2 · Answer 2 · answered Mar 17 '20 at 09:35

Another approach that used for Angular 9 with following syntax:

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  }
];

score 0 · Answer 3 · answered Apr 04 '19 at 12:52

For me, the proposed solution with relative paths did not work.

If somebody else has a problem with this, try my solution here where you use absolute paths and add the lazy modules under lazyModules in your angular.json config file:

Angular 5 lazy loading Error: Cannot find module

Lazy Loading Angular Modules with router: Error cannot find module

3 Answers3