Cannot read property 'ngMetadataName' of undefined

user_1035104 0
Viewed 17502

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,
  }
});
angular-material-6 angular6 angular-cli angular
8 Answers

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.

To see the created circular dependency in your angular project, please enable showCircularDependencies in angular.json by changing its value from false to true.

user_31021080

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
user_39186120

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

user_5866090

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"
user_26222920

Check a few things ..

1>Check all the User Defined Services are registered under app.module.ts providers[]

2>All the Angular Modules(eg.AppRoutingModule,FormsModule,HttpClientModule) should be registered under imports[]

It has resolved my issue .

user_135232080

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.

user_55505070

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 just npm updating and installing and ignoring the initial warning message.

The other recommended option, if you are still willing to use the newest angular,
is to use with ng serve --aot.

user_12025570

There might be a circular dependency in your code.

solve it, This error will go.

user_86188150
Related