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!

Answer 1

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