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

user_8086276 0
Viewed 35335

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?

nested-routes angular routes
5 Answers

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

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
  {...}
);
user_117197870

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

user_109829720

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
]
})
  1. 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 }]
user_111351740

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 {}
user_56259300
Related