ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ɵcmp' property

Question

I get this error whenever the app is running, though is not causing me problems in current development (i think) I would like to understand this error and know where it comes, because I'm completely lost, I can't even post relevant code. But i'll try..

So these are the main routes (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 { }

I have a core module where all the components are registed, and i'm importing the RouterModule.forChild([]):

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

The 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"
  }
}

EDIT appModule

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

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

I never seen this error.Is it an Angular 9 issue? Am I doing something wrong?

Nahshunn

Answer 1

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
}

2. Loading Component instead of Module i.e.

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

Hiawatha

This is very nice way of explaining us noobs. This saved me so much time and cleared so much RAM by closing 100 other tabs :p Cheers! – Ratepayer

Answer 2

You will also get this error when you are opening matDialog and you pass any different type other than a component.

I passed directive instead of the component to dialog.open method.

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

Swerve

Yep, that's what happened in my case – Ashburn

I need to use template ref instead of component. Is there any fix for it? – Albi

Answer 3

You have HttpClient in bootstrap array of your appmodule. That's why it is giving this error.

Egesta

this should also be an accepted answer. It wasn't httpclient for me, but it was another service that was pushed there. – Donalt

Assuming then that HttpClientModule in imports is OK? imports: [ HttpClientModule, ], – Ermina

I had this too but when I had a Web Component in my bootstrap array, which wasn't registered because I hadn't added 'CUSTOM_ELEMENTS_SCHEMA' to my schemas array – Estop

Answer 4

I had the same error, happened when I did use the matDialog.open() method which need to have a component and not a module.

be sure to import the component you're using

1. the .module file into the main.module.ts

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

2. the .component file into the main.component.ts

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

Edit
Also got the same error while working in a library.

the path to the import was pointing to the .umd which isn't correct

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

Alisa

Answer 5

I got this error when I accidently deleted the @ character from the @Component decorator in a page's Typescript file. For example:

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

Hyperphysical

Answer 6

I just had the same issue, but nothing was wrong with my module or component files and their imports. I just deleted the .angular folder and ran yarn run build again and everything worked perfectly.

Fleshings