CODEWITHSUNDEEP
angularangular-routingangular9angular-module
poopp
poopp

Reputation: 1457

ngmodule is not a subtype ngmoduletype

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?

Upvotes: 27

Views: 35133

Answers (6)

Hamid
Hamid

Reputation: 908

In general, this error refers to the way you're loading your modules or components!

For me that was related to how I was loading my standalone component! In fact, I was trying to load my standalone component like this:

   {
    path: 'shell',
    loadChildren: async () =>
     (await import('../features/shell/shell.component')).ShellComponent
   },

Whearase I was supposed to use loadComponent instead of loadChildren!

  {
    path: 'shell',
    loadComponent: async () =>
      (await import('../features/shell/shell.component')).ShellComponent
  },

Mainly, you should use load children for modules that define couple of routes and it's syntax is like

 {
        path: 'builder',
        loadChildren: (): any =>
          import('./builder/builder.module').then((m) => m.BuilderModule)
      },

Notice, how import and then used over here! In order to load components lazily you can take advantage of the below syntax:

 {
    path: 'my-custom-path',
    loadComponent: async () =>
      (await import('../my-custom-component.component')).CustomComponent
  },

Upvotes: 2

Binary_Hits00
Binary_Hits00

Reputation: 1441

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)
},

Upvotes: 45

Babacar Kane
Babacar Kane

Reputation: 11

Just uncomment the end of your lazy loaded module.

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

Upvotes: 1

jaime martin
jaime martin

Reputation: 113

I also had this issue.

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

Upvotes: 8

user-12410035
user-12410035

Reputation: 303

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.

Upvotes: 3

lucaasnp_
lucaasnp_

Reputation: 129

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

Upvotes: 12

Related Questions