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.
}

Answer 1

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.

Answer 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