Error: Permission denied to access property "rejection"

Question

Error: Permission denied to access property "rejection"

When i use Http Service injection it throwing error

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


@Injectable()
export class ToDoService{
    constructor (http: Http) {}

    getTODOS():any{       
        return "";
        // return this.http
        //    .get('https://jsonplaceholder.typicode.com/posts')
        //    .map(res => res.json().data);
    }  
}

Answer 1

I got the same exception in Firefox. Please try another browser to do the debug.

In my case, FireBug only shows the "Error: Permission denied to access property "rejection"", and no more information.

But in Chrome, it shows more, like :

Error: Uncaught (in promise): Error: (SystemJS) Unexpected token <
SyntaxError: Unexpected token <
    at Object.eval (http://localhost/UI/app/service/order/order.service.js:14:14)
    at eval (http://localhost/UI/app/service/order/order.service.js:57:4)
    at eval (http://localhost/UI/app/service/order/order.service.js:58:3)
Evaluating http://localhost/UI/node_modules/rxjs
Evaluating http://localhost/UI/app/service/order/order.service.js
Evaluating http://localhost/UI/app/component/order/order.module.js
Error loading http://localhost/UI/app/component/order/order.module.js

Then base on these exception trace, I catch my bug. Here attach the root cause of my bug for your reference.

In some example of online offical doc, it import Observable with " import { Observable } from 'rxjs';"

But it would cause previous exception in my project. Change it to " import { Observable } from 'rxjs/Observable'; ", then it's ok.

Answer 2

Try importing the map operator from rxjs package. It resolved my problem.

import 'rxjs/add/operator/map';

If you use do and catch methods you should have two more imports:

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';

Here is the code for your ToDo service:

import {Injectable}     from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from "rxjs/Observable";

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';

@Injectable()
export class ToDoService {
  constructor(private _http: Http) {
  }

  getToDos(): Observable<any> {
    return this._http.get("https://jsonplaceholder.typicode.com/posts")
      .map((response: Response) => response.json());
  }
}

See the edited code on Plunker