angular - 角度延迟加载的编译错误
问题描述
我正在研究角度的延迟加载。我创建了一个名为“Offers”的新模块,在该文件夹本身中我创建了名为“Offers”的组件。
应用程序路由.module.ts :
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { OrdersComponent } from './orders/orders.component';
const routes: Routes = [
{ path:"" , component:HomeComponent},
{ path:"Home" , component:HomeComponent},
{ path:"Orders" , component:OrdersComponent},
{path:"Offers", loadChildren:'./Offers/Offers.module'},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
我曾使用 loadchildred 加载需要按需显示的惰性模块(Offers)。
提供-routing.module.ts :
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OffersComponent } from '../offers/offers.component';
const routes: Routes = [
{path:"" , component:OffersComponent}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class OffersRoutingModule { }
应用组件.html:
<div style="text-align:center">
<a [routerLink]="['/']">Products</a>
<a [routerLink]="['/Orders']">My Orders</a>
<a [routerLink]="['/Offers']">Offers</a>
</div>
<div>
<router-outlet>
</router-outlet>
</div>
目前正在编译,我收到以下错误:
“./src/app/Offers/Offers.module.ts 中的错误模块构建失败(来自 ./node_modules/@ngtools/webpack/src/index.js):错误:G:\AngularTest\Lazyload\src\app\ TypeScript 编译中缺少 Offers\Offers.module.ts。请通过 'files' 或 'include' 属性确保它在您的 tsconfig 中。在 AngularCompilerPlugin.getCompiledFile (G:\AngularTest\Lazyload\node_modules@ngtools\webpack \src\angular_compiler_plugin.js:913:23) 在 G:\AngularTest\Lazyload\node_modules@ngtools\webpack\src\loader.js:41:31 在 processTicksAndRejections (internal/process/task_queues.js:93:5)"
解决方案
您需要修复预期的语法loadChildren
:
{path:"Offers", loadChildren:'./offers/offers.module#OffersModule'}
对于较新的应用程序和官方文档,您可能会发现带有 javascript 动态导入的新语法:
{
path:"Offers",
loadChildren: () => import('./offers/offers.module').then(m => m.OffersModule)
}
推荐阅读
- sql - 仅当列值不包含任何特定前缀时才连接
- mysql - 如何在 Ubuntu OS 中远程访问 dockerised 数据库容器?
- r - R中数据框中两列之间的计算
- python - 如何在脚本中导入所有 django 模型等?
- sql - SQL Joining/merging两个事件表,对对应时间敏感
- laravel - 为什么在 Laravel 中发送电子邮件附件时给出未定义的变量?
- airflow - 使用 PyPi 包“成功”更新后 Cloud Composer Airflow webserver 502 服务器错误
- python - 重新排列周末后的移位列以具有相同的数字并遵循数字序列python
- node.js - 如何在angularv8中显示来自服务器的数据
- c++ - C++中的多元正态分布