Angular 2 (RC1) cannot read property 'isSkipSelf' of null

Question

I have an angular application and after some recent refactors I am getting a new cryptic error message that I can't figure out.

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'isSkipSelf' of null

This error started to occur when I set a variable type to a service (ProductMeshGradientService) in the constructor. If I remove the reference in the constructor then the application works as expected.

Summed up code:

Service that is breaking Note: I'm not using the productMeshGradientService at all currently for debugging reasons. So I can confirm the error isn't related to using the service but is caused by simply setting a variable to the service type. Neither the Http or ProductImageTextureServices cause any problems.

import {
  Injectable,
  EventEmitter
} from '@angular/core';
import {
  Http,
  Response
} from '@angular/http';

import { ProductMeshGradientService } from '../../services/product.mesh-gradient/product.mesh-gradient.service';

@Injectable()
export class TextureService {
    constructor( 
        private http: Http,
        private productMeshGradientService: ProductMeshGradientService ,
        private productImageTextureService: ProductImageTextureService) { }
    // Some methods are here.
}

Service that is being imported (abbreviated) Note: This file is having very similar issues in that if I remove the variables being set in the constructor then the error goes away. The only difference is in this file I need to remove both productService and productCanvasService.

import { Injectable } from '@angular/core';

import { ProductService } from '../product/product.service';
import { ProductDropService } from '../product.drop/product.drop.service';
import { ProductCanvasService } from '../product.canvas/product.canvas.service';

@Injectable()
export class ProductMeshGradientService {
  constructor ( private productService: ProductService,
                private productCanvasService: ProductCanvasService ) {
  }

  // Some methods live here.
}

try npm install fixed for me – Nikhil K S Apr 07 '20 at 09:06 — Nikhil K S, Apr 07 '20 at 09:06

score 6 · Answer 1 · edited May 23 '17 at 12:25

6

This error has been reported in the angular repo: https://github.com/angular/angular/issues/9332

The problem is caused by undefined values that are injected in the constructor or directives/providers entry of a component annotation.

The undefined values are caused by imports that resolve to undefined due to barrel ordering issues or valid circular dependencies

It looks like you're simply missing an import of ProductImageTextureService in your TextureService module.

However, you're saying the problem is with ProductMeshGradientService. I'd debug this in chrome, setting a breakpoint on the export class ... lines and see what the value of those imported modules are. If they're undefined, then there's a problem loading that module.

You could also try updating to RC3 as I believe the issue referenced above is fixed in that release, it should provide a clearer error message.

edited May 23 '17 at 12:25

Community

1
1

answered Jun 23 '16 at 23:16

Michael

5,994
7
44
56

Updating to rc3 has given me a much more descriptive error, but I'm still a little lost. It seems that it is saying that it can't resolve the 4th service being passed to my constructor but I'm not sure why it can't resolve it. I have it included above in my imports. EXCEPTION: Can't resolve all parameters for ProductDropService: (ProductClickedObjectService, ProductColorService, ProductGradientTextureService, ?, ModelThreeDService). – efarley Jun 24 '16 at 00:15
One thing that I have been considering as a cause is that I have service A which imports service B which imports service C which imports service A creating a circular dependency – efarley Jun 24 '16 at 00:19
@efarley Indeed a valid circular dependency would result in an undefined value. I'd recommend refactoring your services to eliminate the dependency but a quick fix would be to use [forwardRef](https://angular.io/docs/ts/latest/cookbook/dependency-injection.html#!#forwardref) – Michael Jun 24 '16 at 02:02

Andrei Zhytkevich · Answer 2 · 2016-06-23T21:12:47.813

2

This error usually appears if you access a class member of a Component in a template through interpolation, in case this member is null.

Basically nothing to do with Service, but a Component issue.

Update: Look for something like {{ object.isSkipSelf }}

object can be anything: object, function call, field of another object.

You have to change it to {{ object?.isSkipSelf }}

This is called elvis operator https://en.wikipedia.org/wiki/Elvis_operator#Angular2

edited Jun 23 '16 at 21:12

answered Jun 23 '16 at 19:41

Andrei Zhytkevich

8,039
2
31
45

Could you provide an example of what this might look like? We have quite a few controllers and I'm not sure where to look since the only time I get this error is in response to editing a service. – efarley Jun 23 '16 at 20:27

score 0 · Answer 3 · answered Dec 19 '17 at 07:50

0

I think the problem is because of Circular Dependency please go through the below link for more details about Circular Dependency

And try to avoid this in your code then you will not get this error.

answered Dec 19 '17 at 07:50

Anil kumar

416
1
6
18

score 0 · Answer 4 · answered Sep 28 '18 at 10:54

0

In some cases this is caused by the Angular Language Service Extension. You can disable the extension and reload your work-space to verify.

answered Sep 28 '18 at 10:54

Mwiza

7,780
3
46
42

score 0 · Answer 5 · answered Jun 27 '19 at 10:32

0

I got this error once when I forgot to check in a file containing an Injectable service. No problem locally but got this error on the build server. You would expect something more descriptive in that case.

answered Jun 27 '19 at 10:32

Nico Timmerman

1,427
12
12

score 0 · Answer 6 · answered Jul 18 '19 at 13:54

Mine is not a technical answer at all. This is what helped me and I can't guarantee that it will help you; however it doesn't hurt in trying. I just did 'npm install' and then i restarted VS code. That resolved this issue automatically for me. In my case the other answers were not applicable. The only change I had made was to html file. I was getting this error in my html file and not in ts file. So there was no question of wrong imports or invalid values in constructor or anything.

score 0 · Answer 7 · answered Sep 30 '19 at 13:32

Two Reason Founded :

First Wrong Import:

Just run on the same error
turns out I had error inside one of my custom components, it was mistake in import statement in TS file

after fixing the component TS import, the template error was gone

it would be nice to have better error message in this case

Second Language Service Extension:

I disabled/reloaded and enabled/reloaded Angular Language Service and the error disappeared

Link : github

Angular 2 (RC1) cannot read property 'isSkipSelf' of null

7 Answers7