在angular中延迟加载的编译错误
我正在研究角度的延迟加载。我创建了一个名为“Offers”的新模块,在该文件夹中我创建了名为“Offers”的组件 app-routing.module.ts:在angular中延迟加载的编译错误,angular,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 { Orders
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 { }
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 { }
我使用loadchildred加载需要按需显示的惰性模块(提供)
提供-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 { }
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):
错误:G:\AngularTest\Lazyload\src\app\Offers\Offers.module.ts在TypeScript编译中丢失。请通过“文件”或“包含”属性确保它在tsconfig中。
在AngularCompilerPlugin.getCompiledFile(G:\AngularTest\Lazyload\node_modules@ngtools\webpack\src\angular\u compiler\u plugin.js:913:23)
在G:\AngularTest\Lazyload\node_modules@ngtools\webpack\src\loader.js:41:31
在processTicksAndRejections(internal/process/task_queues.js:93:5)“中,您需要修复
加载子项上的预期语法:
{path:"Offers", loadChildren:'./offers/offers.module#OffersModule'}
对于较新的应用程序和官方文档,您可能会发现javascript动态导入的新语法:
{
path:"Offers",
loadChildren: () => import('./offers/offers.module').then(m => m.OffersModule)
}
你是否也检查了大写字母的拼写错误?(Offers.module
vsOffers.module
)文件夹名称中有一个输入错误:它是Offers,而不是OffersThnaks,它使用小的“o”而不是大写的“o”。