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,
  }
});

mention the versions of @angular/cdk, @angular/core and @angular/material that you're using/ — SiddAjmera, Aug 27 '18 at 11:31
i got the same error because in defined two services in one file while the first service in file was using the second one as DI (which was not defined at this time because is declared after the first one) — cyptus, Jan 15 '19 at 17:49

score 37 · Accepted Answer · edited Mar 30 '20 at 20:18

37

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.

edited Mar 30 '20 at 20:18

Dale K

25,246
15
42
71

answered Sep 17 '18 at 13:58

user3102108

386
2
3

2

I recommend grabbing the circular dependency plugin for webpack, that showed us a bunch of circular deps, that, when fixed, cause the above error to go away: https://www.npmjs.com/package/circular-dependency-plugin – DarkNeuron Feb 18 '19 at 19:18
Same happened with me – Rojy Kumari Apr 28 '19 at 19:44

score 19 · Answer 2 · answered Jun 25 '19 at 13:46

19

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

answered Jun 25 '19 at 13:46

Matt Walterspieler

2,073
2
21
34

1

This solved my problem too. Not sure why tho. Do you have any theory about why this happens on 8.0.4? I also found out that using this version, Angular was complaining at runtime about a missing interface declared in the same file. – Gabriel G. Jun 26 '19 at 15:39
I've read on angular GitHub issues that it was corrected on the following nightly build. I guess we just gotta wait for the next release. I have no idea why it happens though. – Matt Walterspieler Jun 26 '19 at 16:58
2

@GabrielG. Did not test it but I think this happens when you have @Inject(..) decorator and defined the type of the parameter at the same time. – Gokhan Kurt Jun 27 '19 at 14:04
@GökhanKurt can you explain more what exactly causes this? I was running into it with Inject but couldn't figure out why it would sometimes happen. Would really like to generate an example. – Bryant Jun 30 '19 at 00:33
1

I had this error in CLI `8.0.6` and the downgrade to `8.0.3` fixed it for me. – S. Baggy Jul 01 '19 at 04:36
FYI Issue closed https://github.com/angular/angular/commit/f83dfd6f5aabdfc1c5363fa8a7f7b8145c8fad92 – Matt Walterspieler Jul 01 '19 at 19:03
Any idea why this issue was closed? – esastincy Jul 02 '19 at 19:02
3

It's fixed in the latest 8.1.0 – Exocomp Jul 02 '19 at 22:40
More info about the issue: https://github.com/angular/angular-cli/issues/14888#issuecomment-508096612 – Matt Walterspieler Jul 03 '19 at 13:40

score 2 · Answer 3 · answered Sep 05 '19 at 12:42

2

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

answered Sep 05 '19 at 12:42

Stanislav Berkov

5,929
2
30
36

I had the same problem, but it was just because the classes were `@Injectable`, not necessarily a service. – krillgar Jan 22 '20 at 16:57

score 1 · Answer 4 · answered Aug 27 '18 at 12:29

1

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"

answered Aug 27 '18 at 12:29

SiddAjmera

38,129
5
72
110

No Luck. Actually the modals are opening normally, the only problem is when i am opening the modal through a Service. The injectables are causing the error. – Aslam Aug 27 '18 at 14:02
Okay. Create a stackbliz and probably someone will have a look into it. There might be some issues with the syntax only it seems. – SiddAjmera Aug 27 '18 at 14:03
Also, on Production it works, its just with the development. – Aslam Aug 27 '18 at 14:09
Moved back to an older image, its working. Thanks for the help. But i will still wait for other answers to solve the issue. – Aslam Aug 27 '18 at 14:57
You can put the v7.2.2. It is stable. See: https://stackoverflow.com/questions/52476229/typeerror-unable-to-get-property-ngmetadataname-of-undefined-or-null-referenc/55165724#55165724 – Victor Jatobá Mar 14 '19 at 14:59

score 1 · Answer 5 · answered Jun 13 '20 at 14:06

1

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 .

answered Jun 13 '20 at 14:06

Gangadhar Panda

41
3

This is solved my issues. – AHAMED AAQIB Aug 15 '22 at 13:08

score 0 · Answer 6 · answered Apr 29 '19 at 09:38

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.

For my case circular dependency was the problem, but `ng build` did'n give any useful information — Mojtaba, Nov 28 '19 at 16:35

Christian Læirbag · Answer 7 · 2020-02-14T23:51:17.070

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.

score 0 · Answer 8 · answered Nov 22 '19 at 09:50

0

There might be a circular dependency in your code.

solve it, This error will go.

answered Nov 22 '19 at 09:50

Saurabh Singh Rajput

674
2
6
12

Cannot read property 'ngMetadataName' of undefined

8 Answers8