在角度 8 中插入延迟加载时出错： ： 断言错误： NgModule 'MyReportsGridComponent' 不是'NgModuleType'的子类型

Question

我阅读了一些文章似乎无法实现懒惰 - 加载我的应用程序。我已经安装了Angular 8，看来我的语法正确。是否有特定的策略或我需要组织组件以使懒惰的负载工作？

这是错误消息：

core.js:7187 ERROR Error: Uncaught (in promise): Error: ASSERTION ERROR: NgModule 'MyReportsGridComponent' is not a subtype of 'NgModuleType'.
Error: ASSERTION ERROR: NgModule 'MyReportsGridComponent' is not a subtype of 'NgModuleType'.

在我的app.routing.module.ts中，我拥有的是什么：

const routes: Routes = [
  {path: '', component:LoginComponent},
  {path: 'Login', component:LoginComponent},
  {path: 'tasks', component:TaskComponent, canActivate:[AuthGuard]},
  {path: 'CreateTask', loadChildren: () => import ('./create-task/create-task.component').then(m => m.CreateTaskComponent), canActivate:[AuthGuard]},
  {path: 'ManageUser', loadChildren: () => import ('./manage-users/manage-users.component').then(m => m.ManageUsersComponent), canActivate:[AuthGuard]},
  {path: 'MyReports', loadChildren: () => import ('./my-reports-grid/my-reports-grid.component').then(m => m.MyReportsGridComponent), canActivate:[AuthGuard]},
  {path: 'CreateTeamName',loadChildren: () => import ('./create-new-team-name/create-new-team-name.component').then(m => m.CreateNewTeamNameComponent), canActivate:[AuthGuard]},
  {path: 'ManageTeams',loadChildren: () => import ('./manage-teams/manage-teams.component').then(m => m.ManageTeamsComponent), canActivate:[AuthGuard]},
  { path: '**', component: PageNotFoundComponent },
  {path: 'Register', component:RegisterComponent}
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true, enableTracing: false, initialNavigation: true, onSameUrlNavigation: 'ignore' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

有什么建议？

Answer 1

也偶然发现了这一点。看起来您正在尝试懒惰的负载组件而不是模块。在此处查看：https：//angular.io/guide/ngmodules

Answer 2

您尝试此操作，让我知道它是否有效，我会更新您

gridModulename 它的模块类名称

{
path: 'myreports',
loadChildren: './my-reports-grid/my-reports-grid.component#GridModuleName',
data: {
  pageTitle: 'MyReports'
 }
}

Answer 3

当我将引导程序设置为AppModule而不是设置AppComponent时，我完全遇到了此错误。

发生在我身上，因为我正在进行一些测试。错误的错误。

Answer 4

有两个可能的常见错误

当您加载组件而不是模块时，反之亦然，此错误就会出现。

1。加载组件而不是模块，即。

{
   path: 'login',
   loadChildren: () => import('./login.module').then(m => m.LoginComponent) // mistake
}

2。加载模块而不是组件，即。

{
   path: 'login',
   component: LoginModule // mistake
}

Answer 5

您在loadChildren中使用component，必须使用module而不是组件。

删除导入组件。

{path: 'CreateTask', loadChildren: () => import ('./create-task/create-task.component').then(m => m.CreateTaskComponent), canActivate:[AuthGuard]},

导入模块，像这样。

{path: 'CreateTask', loadChildren: () => import ('./create-task/create-task.module').then(m => m.CreateTaskModule), canActivate:[AuthGuard]},

Answer 6

i有相同的错误。我已经将组件作为App.Routing文件中的模块导入。在这里，MyReportSgridComponent是一个组件，而不是模块。因此，将其导入组件。

{路径：" myreports"，组件：myreportsgridcomponent，}