浏览器控制台中出现“找不到模块”错误消息

Question

我是Angular CLI的新手。我在Angular项目的根目录下运行了以下代码。

issue-management\src\webui>ng generate module pages\dashboard
issue-management\src\webui>ng generate component pages\dashboard

但未生成“ moduleName-routing.module.ts”文件，请手动创建它们。我试图用“ --routing”参数创建一个模块，但结果没有改变。同样的错误消息出现在浏览器中。文件夹结构：

dashboard-routing.module.ts文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {DashboardComponent} from './dashboard.component';

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

dashboard.module.ts文件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './dashboard.component';


@NgModule({
  declarations: [DashboardComponent],
  imports: [
    CommonModule,
    DashboardRoutingModule
  ]
})
export class DashboardModule { }

app-routing.module.ts文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  {
    path: '',
    children: [
      {path: '', pathMatch: 'full', redirectTo: 'dashboard'},
      {path: 'dashboard', loadChildren: './pages/dashboard/dashboard.module#DashboardModule'},
      {path: 'issue', loadChildren: './pages/issue/issue.module#IssueModule'},
      {path: 'project', loadChildren: './pages/project/project.module#ProjectModule'}
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

浏览器控制台中显示以下错误消息。

ERROR Error: Uncaught (in promise): Error: Cannot find module './pages/dashboard/dashboard.module'
Error: Cannot find module './pages/dashboard/dashboard.module'

Answer 1

您可以尝试将带有import承诺的子项加载如下：

...

{
   path: 'dashboard', 
   loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule)
},

...