Error while implenting lazy-loading in angular 8: : ASSERTION ERROR: NgModule 'MyReportsGridComponent' is not a subtype of 'NgModuleType'

Question

I read some articles can't seem to implement lazy-loading my application. I have angular 8 installed and it seems I have the right syntax. Is there a specific strategy or way I need to have my components organized to get lazy loading to work?

This is the error message:

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'.

in my app.routing.module.ts where is what I have:

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

Any suggestions?

Answer 1

Just stumbled across this as well. Looks like you are trying to lazy load Components instead of Modules. Check here: https://angular.io/guide/ngmodules

Answer 2

You try this one and let me know its working or not I will update you

GridModuleName its your module class name

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

Answer 3

I got exactly this error when I set the bootstrap as AppModule instead to set AppComponent.

That happened to me because I was doing a few tests. Bad mistake.