Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 236
Mellville Avatar asked May 26 '20 01:05

Mellville


3 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
}
like image 129
WasiF Avatar answered Nov 11 '22 23:11

WasiF


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
  {...}
);
like image 40
Sameer Avatar answered Nov 11 '22 23:11

Sameer


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

like image 2
Aakash Garg Avatar answered Nov 12 '22 00:11

Aakash Garg