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/ 时，我收到此异常：

核心.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]

我不知道这意味着什么。有人可以帮助我吗？

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

Answer 2

我也遇到这个问题了

我的问题是我声明的 NgModule 没有@。添加它修复了该消息。

Answer 3

我知道这个问题的最初原因是因为承诺解析被注释掉了，但我想添加另一个原因，因为这是 Google 上此错误的最高命中率，并且有多种原因。

如果您尝试将组件用作模块，也可能会导致这种情况。使用

component: MyComponentName

而不是

loadChildren: () => import('./my-component.component').then( m => m.MyComponent)

也可以解决此问题。如果您打算将其作为一个模块，如果您想将路由委托给另一个模块，则可以使用

ng generate module

创建一个模块。

Answer 4

只需取消注释延迟加载模块的末尾即可。

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

Answer 5

我遇到的这个问题是因为在我的角度组件中使用独立，然后在app.routes.ts中使用带有延迟加载路线的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)
},