angular - 为什么 Angular 6 loadChildren 不起作用?
问题描述
我是 Angular 新手,所以我正在通过 Maximilian Schwarzmüller 的 Udemy 视频课程“Angular6 The Complete Guide”进行学习。我几乎即将完成课程,但在“了解 Angular 模块和优化应用程序”单元下的“将延迟加载添加到食谱模块”一章中坚持使用延迟加载。在此,讲师将整个食谱模块及其路由模块分开。我尝试对在应用程序根级别 -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'}
解决方案
因为你没有购物清单路由模块
推荐阅读
- python - 过滤器返回并分配给变量的迭代似乎没有更新
- android - ArrayAdapter 返回 NullPointerException
- python - 如何在 python 中计算一类 SVM 的准确率、F1 分数、召回率、精度和 EER?
- java - 从服务器响应写入(下载)文件时如何忽略内容长度异常?
- angular - Angular Material mat sidenav 内容导致较大的差距边距
- python-3.x - 从 api 获取值并显示在 reactjs 应用饼图中
- java - 带有 bufferedreader.readLine () 的缓冲区意外返回 null
- python - NameError - 代码不再存在的 Python 错误
- python - 将 DataFrame 保存到 CSV 时删除反斜杠转义字符
- java - 如何修复 org.hibernate.PropertyAccessException:无法通过反射设置器设置字段值