ngmodule is not a subtype ngmoduletype

Question

I use angular 9 and I want to do lazy load and I do app-routing

{
    path: '', loadChildren: () => import("./components/login/login.module")//.then(m =>
     // m.LoginModule)
  }

and after I create login module:

@NgModule({
    declarations: [LoginComponent],
    imports: [
        CommonModule,
        FormsModule,
        LoginModuleRouting

    ],
    providers:[]
})
export class LoginModule { }

and routing:

const routes: Routes = [
  {
    path: '', component: LoginComponent,

  }
];

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


export class LoginModuleRouting { }

the proble is that when I call ng serveand I go on `http://localhost:4200/, I obtain this exception:

core.js:6237

 ERROR Error: Uncaught (in promise): Error: ASSERTION ERROR: NgModule '[object Module]' is not a subtype of 'NgModuleType'. [Expected=> null != null <=Actual]
Error: ASSERTION ERROR: NgModule '[object Module]' is not a subtype of 'NgModuleType'. [Expected=> null != null <=Actual]

I don't knwo what it means. Anyone can help me?

It seems that you have important parts of the lazy loading route configuration commented out. Why? — R. Richards, May 05 '20 at 13:54
has your main module `imports: [RouterModule.forRoot(routes)],` defined? — brandt.codes, May 05 '20 at 13:56

score 11 · Answer 1 · answered Aug 12 '20 at 17:36

I don't know why but you have commented out your login module on loadChildren() here:

{
path: '', 
loadChildren: () => import("./components/login/login.module")//.then(m =>
     // m.LoginModule)
}

and it should be:

{
path: '', 
loadChildren: () => import("./components/login/login.module").then(m => m.LoginModule)
}

score 8 · Answer 2 · answered Jan 08 '21 at 18:26

8

I also had this issue.

My problem was that I declared the NgModule without @. Adding it fixed the message.

answered Jan 08 '21 at 18:26

jaime martin

91
1
4

1

wow never realized how much dependent I am on the cli/autocomplete. – Ketu Jan 28 '22 at 14:51

score 3 · Answer 3 · answered Oct 02 '20 at 04:49

I know that the original cause of this was because of promise resolution being commented out, but I wanted to add another cause since this is the highest hit on Google for this error and there are multiple causes.

This can also be caused if you're trying to use a component as a module. Using component: MyComponentName instead of loadChildren: () => import('./my-component.component').then( m => m.MyComponent) will resolve this issue too. If you intended it to be a module, you can use ng generate module to create a module instead if you want to delegate routing to another module.

score 0 · Answer 4 · edited Mar 14 '22 at 16:29

0

Just uncomment the end of your lazy loaded module.

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

edited Mar 14 '22 at 16:29

Elikill58

4,050
24
23
45

answered Mar 14 '22 at 10:32

Babacar Kane

1
1

score 0 · Answer 5 · answered Aug 27 '23 at 18:36

this problem I faced was because of using standalone in my angular component and then using loadChildren with lazy loading route in app.routes.ts. All I had to do was changing loadChildren to loadComponent

in app.routes.ts was

{
  path: 'login',
  loadChildren: () => import('./pages/login-page/login-page.component').then( m => m.LoginPageComponent)
},

and it should be

{
  path: 'login',
  loadComponent: () => import('./pages/login-page/login-page.component').then( m => m.LoginPageComponent)
},

ngmodule is not a subtype ngmoduletype

5 Answers5