Почему угловые 6 loadChildren не работают?
Я новичок в angular, поэтому я изучаю видеокурс Удеми "Angular6 The Complete Guide" Максимилиана Шварцмюллера. Я почти заканчиваю курс, но застрял с ленивой загрузкой в главе "Добавление ленивой загрузки в модуль рецептов" в разделе "Понимание угловых модулей и оптимизация приложений". В этом инструктор разделяет все модули рецептов и модуль маршрутизации. Я попытался сделать то же самое для торгового модуля, который имеет модуль маршрутизации на уровне корня приложения -app-routing.module.ts
1) код app-routing.module.ts
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
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 { }
Итак, почему эта строка кода не работает, даже если нет ошибок вообще?
{ path: 'shopping-list', loadChildren: './shopping-list/shopping-list.module#ShoppingListModule'}
Я прикрепил изображение структуры моего проекта 