ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ɵcmp' property
Solution 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
}
Solution 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
{...}
);
Solution 3
You have HttpClient in bootstrap array of your appmodule. That's why it is giving this error.
Solution 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
- the .module file into the
main.module.ts
import { YourModalModule } from './your-modal.module.ts'// <-- .module.ts
//...
@NgModule({
imports: [
YourModalModule
]
})
- 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 }]
Mellville
Updated on July 09, 2022Comments
-
Mellville almost 2 years
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?