angular 7 TypeError: Cannot read property 'hasOwnProperty' of undefined

Question

Yes there are dozens of occurrences of similar questions here on SO, and that's kind of the problem. They're all so generic as to be unhelpful. I understand what this error means, but hope that someone can help me find the "why" of it somewhere.

I have a Angular 7 app, generated with the CLI, and have run into this error when one of my modules is loaded. It happens regardless of whether the module is loaded synchronously or lazily.

The apparent root cause is that a module dependency cannot be resolved. In fact, I've stepped through the module dependency resolution code in @angular/core (lots of fun, I'll tell you), and found that at the point of failure the injection token used to resolve a module dependency is something like "undefined_348", rather than "Router_43" or similar.

The undefined token occurs in proximity to other tokens that correspond to services that I have written, so I'm pretty sure I've done something incorrectly, or not done something that I should have. However, I have another module that injects the same dependencies and it loads correctly. I'm hoping that someone has seen this error in the same context and can provide a clue about how to find the wayward dependency.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 
'hasOwnProperty' of undefined
TypeError: Cannot read property 'hasOwnProperty' of undefined
at getInjectableDef (core.js:120)
at resolveNgModuleDep (core.js:19748)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20452)
at injectInjectorOnly (core.js:1173)
at inject (core.js:1178)
at injectArgs (core.js:1230)
at core.js:14376
at _callFactory (core.js:19825)
at _createProviderInstance (core.js:19783)
at resolveNgModuleDep (core.js:19758)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
. . .

As an aside, it sure seems like @angular/core should fail much earlier if it ends up generating an "undefined" injection token like this, so I'm open to any upstream solution that might help.

Angular CLI: 7.0.6
Node: 8.11.3
OS: linux x64
Angular: 7.1.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.6
@angular-devkit/build-angular     0.10.6
@angular-devkit/build-optimizer   0.10.6
@angular-devkit/build-webpack     0.10.6
@angular-devkit/core              7.0.6
@angular-devkit/schematics        7.0.6
@angular/cli                      7.0.6
@ngtools/webpack                  7.0.6
@schematics/angular               7.0.6
@schematics/update                0.10.6
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

Answer 1

put all service in providers array of app.module.ts, my issue is not put LocalStorageService in providers

Answer 2

This error topic is a bit outdated, but I've fought a lot with this angular DI issue. I've found a solution for missing dependencies that raise hasOwnProperty error (or '?prov' for old angular versions).

It's related to barrel files (explanation here). Those files (named index.ts), some times are not correctly resolved (more here).

I got hit by hasOwnProperty error, when trying to understand why a route, structured according to Angular Router docs, didn't have a resolved dependency in canActivate property.

My solution was changing the import of that dependency (a service). I changed it from 'app/core' (a barrel), to a direct import to it, in 'app/core/auth/user-route-access-service'. That service was provided in root.

How to debug (tested with Angular 10 and 11)

Useful if you don't have a clue where to fix. Using Chrome, open developer tools with F12. Open the page where the error is being logged, then click in resolveNgModuleDep.

Add a logpoint a little above from where you are:

With the content 'Module: ', data._moduleType.name

Then click here:

And add another logpoint here:

With the content 'Component: ', futureARS.component.name, ' canActivate=', canActivate

Refresh page with F5

After that, you will be able to locate the component (surrounded by the module name), whose route has an invalid canActivate property, which creates the problem.