断言错误：传入的类型不是 ComponentType，它没有 'ɵcmp' 属性

Posted 2023-02-23

【中文标题】断言错误：传入的类型不是 ComponentType，它没有 \'ɵcmp\' 属性

【英文标题】：ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ɵcmp' property断言错误：传入的类型不是 ComponentType，它没有 'ɵcmp' 属性

【发布时间】：2020-09-12 17:20:28

【问题描述】：

每当应用程序运行时我都会收到此错误，但不会导致我在当前开发中出现问题（我认为）我想了解此错误并知道它来自哪里，因为我完全迷失了，我不能甚至发布相关代码。不过我会试试的。。

所以这些是主要的路线（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  

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

@NgModule(
  declarations: [HomeComponent, DetailComponent, RegisterComponent, LoginComponent],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild([])
  ]
)
export class CoreModule  

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"
  

编辑应用模块

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

  ],
  providers: [DataService, fakeBackendProvider, AuthService, AuthGuardService, ShoppingCartService ],
  bootstrap: [AppComponent, HttpClient]

我从未见过这个错误。它是 Angular 9 的问题吗？我做错了吗？

【参考方案1】：

这个错误可能是由两个常见错误引起的

当您加载模块而不是组件时，反之亦然，则会出现此错误。

1。加载模块而不是组件，即

   path: 'login',
   component: LoginModule // mistake

2。加载组件而不是模块，即

   path: 'login',
   loadChildren: () => import('./login.module').then(m => m.LoginComponent) // mistake

【讨论】：

这是解释我们菜鸟的好方法。通过关闭其他 100 个选项卡，这为我节省了很多时间并清除了很多 RAM：p 干杯！

【参考方案2】：

当您打开 matDialog 并传递除 component 之外的任何其他类型时，您也会收到此错误。

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

this.dialog.open(
  MyDirective, //Make sure this is component
  ...
);

【讨论】：

是的，这就是我的情况

【参考方案3】：

您的应用模块的引导数组中有 HttpClient。这就是它给出这个错误的原因。

【参考方案4】：

我遇到了同样的错误，发生在我使用 matDialog.open() 方法时，该方法需要一个 component 而不是 module。

一定要导入你正在使用的组件

将.module 文件放入main.module.ts

import  YourModalModule  from './your-modal.module.ts'// <-- .module.ts
//...
@NgModule(
imports: [
  YourModalModule
]
)

将.component 文件放入main.component.ts

import  YourModalModule  from './your-modal.component.ts' // <-- .component.ts
//...
const confirmDialogRef = this._matDialog.open(YourModuleComponent, )
// ...

编辑在库中工作时也遇到了同样的错误。

导入的路径指向不正确的.umd

import  YourModuleComponent  from 'dist/website/bundles/my-lib.umd' // <-- mistake

const routes: Routes = [ path: '', component: YourModuleComponent ]

import  YourModuleComponent  from './your-module.component' // <-- correct

const routes: Routes = [ path: '', component: YourModuleComponent ]

【参考方案5】：

当我不小心从页面的 Typescript 文件中的 @Component 装饰器中删除了 @ 字符时，我收到了这个错误。例如：

@Component(
    selector: 'app-reset-password',
    templateUrl: './reset-password.page.html',
    styleUrls: ['./reset-password.page.scss'],
)
export class ResetPasswordPage