RangeError: Maximum call stack size exceeded ERROR after I tried to use a selector tag in app component ANGULAR 4 & TypeScript

Question

I'm trying to follow The Heroes Tutorial in Angular, and while I'm integrating my BookListComponent in AppComponent, using the selector tag in app.component.html, I observed the following error: (I'm using ANGULAR 4)

ERROR RangeError: Maximum call stack size exceeded
    at Headers.append (headers.ts:93)
    at eval (headers.ts:59)
    at Array.forEach (<anonymous>)
    at eval (headers.ts:59)
    at Array.forEach (<anonymous>)
    at new Headers (headers.ts:59)
    at new BookService (book.service.ts:12)
    at createClass (provider.ts:362)
    at _createProviderInstance (provider.ts:326)
    at createProviderInstance (provider.ts:135)

The tutorial's code looks the same with mine, but I think that it's a configuration problem or something about providers list, I'm not sure. There is someone here who had the same problem? Here is my code:

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  title = 'sdadas';
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { BookComponent } from './book/book-details/book.component';
import { BookListComponent } from './book/book-list/book-list.component';
import { BookService } from './services/book.service';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
  ],
  declarations: [
    AppComponent,
    BookComponent,
    BookListComponent
  ],
  providers: [ BookService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

book-list.component.ts

import { Component, OnInit, Pipe } from '@angular/core';
import { Router }from '@angular/router';

import { Book } from '../book-details/book';
import { BookService } from '../../services/book.service';

@Component({

  selector: 'book-list',
  templateUrl: './book-list.component.html'
})

export class BookListComponent implements OnInit {
  title = 'Library';
  books: Book[];
  selectedBook: Book;

  constructor(private bookService: BookService) { }

  ngOnInit(): void {
    this.getBooks();
  }

  getBooks(): void {
     this.bookService.getBooks()
      .then(books => {
        this.books = books
      });
  }

  onSelect(book: Book): void {
    this.selectedBook = book;
  }

}

book.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { Book } from '../book/book-details/book';
import { BookComponent } from '../book/book-details/book.component';

import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

@Injectable()
export class BookService {

    private headers = new Headers({'Content-Type': 'application/json'});

    private bookUrl = 'http://localhost:3000/book';
    constructor(private http: Http) { }

    getBooks(): Promise<Book[]> {
        return this.http.get(this.bookUrl)
            .toPromise()
            .then(response => response.json() as Book[])
            .catch(this.handleError);
    }

    getBook(id: any): Promise <Book> {
        const url = `${this.bookUrl}/${id}`;
        console.log(url);
        return this.http.get(url)
            .toPromise()
            .then(response => response.json() as Book)
            .catch(this.handleError);
    }

    private handleError(error) {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }

}

Answer 1

Waitting for answers