断言错误:传入的类型不是 ComponentType,它没有“?cmp”属性

Mel*_*lle 13 routes nested-routes angular

每当应用程序运行时,我都会收到此错误,尽管在当前开发中不会给我带来问题(我认为)我想了解此错误并知道它来自何处,因为我完全迷失了,我什至无法发布相关信息代码。但我会努力的。。

所以这些是主要路线(appModule):

const routes: Routes = [
  {path:'home', component:HomeComponent, canActivate:[AuthGuardService]},
  {path:'detail/:id', component:DetailComponent},
  {path: 'register', component: RegisterComponent},
  {path:'login', component: LoginComponent},
  {path:'', redirectTo:'login', pathMatch: 'full'},
  {path:'**',  redirectTo:'login'}

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
Run Code Online (Sandbox Code Playgroud)

我有一个核心模块,其中所有组件都已注册,我正在导入RouterModule.forChild([])

@NgModule({
  declarations: [HomeComponent, DetailComponent, RegisterComponent, LoginComponent],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild([])
  ]
})
export class CoreModule { }
Run Code Online (Sandbox Code Playgroud)

package.json:

{
  "name": "mat-shop",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.9",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/forms": "~9.1.9",
    "@angular/localize": "~9.1.9",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/router": "~9.1.9",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
    "bootstrap": "^4.4.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.7",
    "@angular/cli": "~9.1.7",
    "@angular/compiler-cli": "~9.1.9",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}
Run Code Online (Sandbox Code Playgroud)

编辑应用模块

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    CoreModule,
    NgbModule

  ],
  providers: [DataService, fakeBackendProvider, AuthService, AuthGuardService, ShoppingCartService ],
  bootstrap: [AppComponent, HttpClient]
Run Code Online (Sandbox Code Playgroud)

我从未见过此错误。这是 Angular 9 问题吗?难道我做错了什么?

Was*_*siF 20

This error may come due to two common mistakes

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

1. Loading Module instead of Component i.e.

{
   path: 'login',
   component: LoginModule // mistake
}
Run Code Online (Sandbox Code Playgroud)

2. Loading Component instead of Module i.e.

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

  • 这是向我们菜鸟解释的​​非常好的方式。这为我节省了很多时间,并通过关闭 100 个其他选项卡清除了很多 RAM :p 干杯! (2认同)

Sam*_*eer 11

当您打开matDialog并传递除组件之外的任何不同类型时,您也会收到此错误。

我将指令而不是组件传递给dialog.open方法。

this.dialog.open(
  MyDirective, //Make sure this is component
  {...}
);
Run Code Online (Sandbox Code Playgroud)