Angular 找不到自定义模块
Angular can't find custom module
我正在尝试将我的 Angular 7 应用程序转换为使用模块,以便延迟加载。当我 运行 使用模块时,浏览器显示
core.js:18374 ERROR Error: Uncaught (in promise): Error: Cannot find module './orders/orders.module'
Error: Cannot find module './orders/orders.module'
我不确定为什么会这样,因为 .../src/app/orders/orders.module.ts
文件确实存在。最初我只有一个 .../src/app/orders
目录,里面有多个组件。为了实现我这样做的模块
% mv src/app/orders orders
% ng g m orders --routing
% mv orders/* src/app/orders
然后我删除了 app-routing.module.ts
中的所有路线并将其替换为这个,这样默认情况下,当您转到该应用程序时,它会将您带到订单列表。
{
path: 'orders',
loadChildren: './orders/orders.module#OrdersModule'
},
{
path: '',
redirectTo: 'orders',
pathMatch: 'full'
}
然后 orders-routing.module.ts
看起来像这样:
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {OrderEditComponent} from './order-edit/order-edit.component';
import {OrderListComponent} from './order-list/order-list.component';
const routes: Routes = [
{path: 'edit', component: OrderEditComponent},
{path: 'byMonth', component: OrderListComponent},
{path: '', component: OrderListComponent},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class OrdersRoutingModule {
}
orders.module 看起来像这样:
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {OrdersRoutingModule} from './orders-routing.module';
import {OrderListComponent} from './order-list/order-list.component';
import {OrderEditComponent} from './order-edit/order-edit.component';
@NgModule({
declarations: [
OrderListComponent,
OrderEditComponent
],
imports: [
CommonModule,
OrdersRoutingModule
]
})
export class OrdersModule {
}
您可以看到文件存在于正确的位置。
好的,我建议使用 angular CLI 创建一个新项目,复制应用程序文件夹,粘贴到新项目中,然后重新 运行 它。
在根模块中导入 OrdersModule。
我正在尝试将我的 Angular 7 应用程序转换为使用模块,以便延迟加载。当我 运行 使用模块时,浏览器显示
core.js:18374 ERROR Error: Uncaught (in promise): Error: Cannot find module './orders/orders.module'
Error: Cannot find module './orders/orders.module'
我不确定为什么会这样,因为 .../src/app/orders/orders.module.ts
文件确实存在。最初我只有一个 .../src/app/orders
目录,里面有多个组件。为了实现我这样做的模块
% mv src/app/orders orders
% ng g m orders --routing
% mv orders/* src/app/orders
然后我删除了 app-routing.module.ts
中的所有路线并将其替换为这个,这样默认情况下,当您转到该应用程序时,它会将您带到订单列表。
{
path: 'orders',
loadChildren: './orders/orders.module#OrdersModule'
},
{
path: '',
redirectTo: 'orders',
pathMatch: 'full'
}
然后 orders-routing.module.ts
看起来像这样:
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {OrderEditComponent} from './order-edit/order-edit.component';
import {OrderListComponent} from './order-list/order-list.component';
const routes: Routes = [
{path: 'edit', component: OrderEditComponent},
{path: 'byMonth', component: OrderListComponent},
{path: '', component: OrderListComponent},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class OrdersRoutingModule {
}
orders.module 看起来像这样:
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {OrdersRoutingModule} from './orders-routing.module';
import {OrderListComponent} from './order-list/order-list.component';
import {OrderEditComponent} from './order-edit/order-edit.component';
@NgModule({
declarations: [
OrderListComponent,
OrderEditComponent
],
imports: [
CommonModule,
OrdersRoutingModule
]
})
export class OrdersModule {
}
您可以看到文件存在于正确的位置。
好的,我建议使用 angular CLI 创建一个新项目,复制应用程序文件夹,粘贴到新项目中,然后重新 运行 它。
在根模块中导入 OrdersModule。