Why is angular 6 loadChildren not working?

Question

I am new to angular, so I am learning through Udemy's video course "Angular6 The Complete Guide" by Maximilian Schwarzmüller. I am almost about to complete the course but stuck with lazyloading in the chapter "Adding Lazy Loading to the Recipes Module" under unit "Understanding Angular Modules and optimizing Apps". In this,the instructor separates out the entire recipes modules and its routing module. I tried doing the same for shopping module which has routing module at app root level -app-routing.module.ts

1) app-routing.module.ts code

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { ShoppingListComponent } from './shopping-list/shopping-list.component';
  import { HomeComponent } from './home/home.component';

  const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'recipes', loadChildren: './recipes/recipes.module#RecipesModule'},
    { path: 'shopping-list', loadChildren: './shopping-list/shopping-list.module#ShoppingListModule'}
  //  { path: 'shopping-list', component: ShoppingListComponent }
  ];
  @NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
  })
  export class AppRoutingModule {

  }

2)app.module.ts code

      import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';

  // added below two
  import { HttpModule } from '@angular/http';
  import { AppComponent } from './app.component';
  // added header component
  // import { HeaderComponent } from './header/header.component';
  import { HeaderComponent } from './header/header.component';
  import { ShoppingListService } from './shopping-list/shopping-list.service';
  import { AppRoutingModule } from './app-routing.module';
  import { RecipeService } from './recipes/recipe.service';
  import { DataStorageService } from './shared/data-storage.service';
  import { AuthService } from './auth/auth.service';
  import { AuthGuard } from './auth/auth-guard.service';
  import { SharedModule } from './shared/shared.module';
  // import { ShoppingListModule } from './shopping-list/shopping-list.module';
  import { AuthModule } from './auth/auth.module';
  import { HomeComponent } from './home/home.component';


  @NgModule({
    declarations: [
      AppComponent,
      // add header comp
      HeaderComponent,
      HomeComponent
        ],
    imports: [
      BrowserModule,
      // add Forms and HTTP module
      // FormsModule,
      HttpModule,
      AppRoutingModule,
      SharedModule,
      // ShoppingListModule,
      AuthModule
    ],
    providers: [ShoppingListService, RecipeService, DataStorageService, AuthService, AuthGuard],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

So, why does this line of code don't work, even though there are no errors at all?

{ path: 'shopping-list', loadChildren: './shopping-list/shopping-list.module#ShoppingListModule'}

I attached my project file structure image

Answer 1

Because you don't have shopping-list routing module