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?

Doscher

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

Interlineate

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

Foxy

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.

Sputter

Answer 4

There are two possible common mistakes

When you load component instead of module or vice versa then this error comes.

1. Loading Component instead of Module i.e.

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

2. Loading Module instead of Component i.e.

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

Marcos

Answer 5

You are using component in loadChildren, you have to use module instead of component.

remove importing component.

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

import module, Like this.

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

Nishanishi

Answer 6

I had the same error. I had imported the component as a modules in the app.routing file. Here, MyReportsGridComponent is a component , not a module. Therefore import it as a Component.

{ path: 'MyReports', component: MyReportsGridComponent, }

Napper