Cannot read property 'ngMetadataName' of undefined

Question

I am using Angular 6 with Angular Material. After updating to the latest version, the console is throwing this error in development. On Production it is working

Cannot read property 'ngMetadataName' of undefined

It occurs when I am trying to open material dialog via a service ( without a service they are working fine). I think it is related to the Injectables, but I am not sure.

Versions: cli: 6.1.5 , core: 6.1.4, material: 6.4.6

Here is the log stack:

CustomDialogComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'ngMetadataName' of undefined
at injectArgs (core.js:1418)
at core.js:1491
at _callFactory (core.js:8438)
at _createProviderInstance (core.js:8396)
at resolveNgModuleDep (core.js:8371)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9064)
at PortalInjector.push../node_modules/@angular/cdk/esm5/portal.es5.js.PortalInjector.get (portal.es5.js:732)
at resolveDep (core.js:9419)
at createClass (core.js:9309)
at createDirectiveInstance (core.js:9186)

Any assistance will be appreciated.

dialog inside the service, where the error is thrown :

 @Injectable({
  providedIn: 'root'
})
export class customService {
  constructor(private store: Store<RootState>, private dialog: MatDialog) {}

const dialogRef = this.dialog.open(customDialogComponent, {
  width: '300px',
  data: {
    loading: false,
    customId,
  }
});

Answer 1

Same message but no relation with Material, I had this error too. I realized, there is a warning about circular dependency. This error disappears after i remove dependencies.

May be other warning messages during compile process will help to fix this.

Answer 2

I encountered this error when I upgraded Angular with the CLI version 8.0.4. I had to downgrade to @angular-devkit/build-angular 0.800.3 and Angular CLI to version 8.0.3.

npm i --save-dev @angular-devkit/build-angular@0.800.3 @angular/cli@8.0.3

Answer 3

Try downgrading @angular/core to 6.0.0

Here is a Sample StackBlitz Project to help you out with the versions of different packages. There are quite a lot of issues with the version mismatch due to which these errors occur.

Here are a few other configs to keep in mind that work well with each other:

    "@angular/animations": "6.0.5",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/cdk": "6.4.6",
    "@angular/material": "6.4.6"

Answer 4

I was facing the same issue in my Angular 7 project.

constructor(private worksheetHandler: WorksheetPayloadHandler,
    private worksheetRepository: WorksheetRepository) { }

As user3102108 mentioned the issue was because there was a circular dependency detected. To confirm, you can run ng build and check the warnings in the terminal. I was getting the warning as below.

WARNING in Circular dependency detected:
src\modules\service\services\worksheets\worksheet.events.service.ts -> src\modules\service\services\worksheets\worksheet.repository.ts -> src\modules\service\services\worksheets\worksheet.events.service.ts

WARNING in Circular dependency detected:
src\modules\service\services\worksheets\worksheet.repository.ts -> src\modules\service\services\worksheets\worksheet.events.service.ts -> src\modules\service\services\worksheets\worksheet.repository.ts

After removing the circular dependency, the issue was resolved.

Answer 5

I had this error due to having 2 services in 1 file. Moving them to separate files solved the issue.

Answer 6

Last time I ng serve 'd, a message prompted saying

Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`

Took advice but then, an error prompted saying that I needed to first command yarn install.

After that, a warning about mixing lockfiles.

I ended up npm updating and installing and ignoring the initial warning message.