角度延迟加载的编译错误

Question

我正在研究 Angular 的延迟加载。我创建了一个名为“Offers”的新模块，在该文件夹本身中我创建了名为“Offers”的组件。

app-routing.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）。

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 { }

appcomponent.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）： 错误：TypeScript 编译中缺少 G:\AngularTest\Lazyload\src\app\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)"

Answer 1

您需要修复 loadChildren 上的预期语法：

{path:"Offers", loadChildren:'./offers/offers.module#OffersModule'}

对于较新的应用程序和官方文档，您可能会发现使用 javascript 动态导入的新语法：

{
  path:"Offers",
  loadChildren: () => import('./offers/offers.module').then(m => m.OffersModule)
}