NgModule不是NgModuleType的子类型。

Question

我使用Angular 9，并且想要进行懒加载，我正在使用app-routing

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

然后我创建了登录模块：

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

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

路由：

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

  }
];

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


export class LoginModuleRouting { }

当我调用ng serve并访问http://localhost:4200/时，出现以下异常：

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]

我不知道这是什么意思。有人能帮助我吗？

- poopp

---

看起来你已经将懒加载路由配置的重要部分注释掉了。为什么？ - R. Richards

你的主模块是否定义了 imports: [RouterModule.forRoot(routes)]？ - brandt.codes

你能展示一下你的 app.module 和 main.ts 文件吗？ - Steve

@poopp，你解决这个问题了吗？ - Nimatullah Razmjo

Answer 1

我不知道为什么，但你已经在这里的 loadChildren() 函数中注释掉了登录模块：

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

它应该是：

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

- lucaasnp_

Answer 2

我也遇到了这个问题。

我的问题是我声明了NgModule，但没有加上@。添加后问题得以解决。

- jaime martin

---

哇，从来没有意识到我有多依赖命令行/自动完成。 - Ketu

Answer 3

这个问题是因为我在我的Angular组件中使用了standalone，然后在app.routes.ts中使用了lazy loading路由的loadChildren。我所要做的就是将loadChildren更改为loadComponent。

在app.routes.ts中的代码如下：

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

而且应该是这样的

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

- Binary_Hits00

---

谢谢，如果你使用独立的组件，就是这样了。我猜我本来可以自己弄清楚的，但是错误信息并没有提供太多信息。不知道为什么有人给你点了踩。 - undefined

Answer 4

我知道最初导致这个问题的原因是因为Promise解析被注释掉了，但我想添加另一个原因，因为这是谷歌上与此错误相关性最高的文章，而且有多个原因。

如果您尝试将组件用作模块，则也会出现此问题。使用 component: MyComponentName 而不是 loadChildren: () => import('./my-component.component').then( m => m.MyComponent) 也可以解决此问题。如果您打算将其作为模块使用，则可以使用 ng generate module 创建一个模块，以便将路由委派给另一个模块。

- user-12410035

Answer 5

只需取消注释您的惰性加载模块结尾即可。

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

- Babacar Kane

---

对我来说很有效！谢谢。 - undefined

Answer 6

一般来说，这个错误是指你加载模块或组件的方式不正确！

对我来说，这与我加载独立组件的方式有关！事实上，我试图以这种方式加载我的独立组件：

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

尽管我本应使用loadComponent而不是loadChildren！

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

主要的是，你应该在定义了几个路由的模块中使用load children，并且它的语法是这样的。

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

注意，这里使用了import和then！为了实现组件的延迟加载，您可以利用下面的语法：

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

- Hamid