[Angular 2] - RangeError: Maximum call stack size exceeded

Bonjour,

Voila je rencontre un petit problème avec mon code.
Dans le cadre d'un projet personnel, je suscite votre aide pour régler un petit problème.
Je récupère via un services des informations issue d'un tableau JSON via l'API Google Places. Les informations globale s'affichent correctement mais lors d'un event sur un bouton pour voir le détail by ID,
j'ai l'erreur suivante qui s'affiche : Uncaught (in promise): RangeError: Maximum call stack size exceeded

///////////////////////restaurant.services.ts/////////////////

import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import { Observable } from "rxjs/Observable";
import { Restaurant } from "../class/restaurant.class";

import "rxjs/add/operator/map";
import "rxjs/add/operator/do"; // il se contente de regarder à l'intérieur de ce qui est retourné par GET
import "rxjs/add/observable/of";
import "rxjs/add/operator/catch";

@Injectable()

export class RestaurantServices {

    private data: any;
    private observable: Observable<any>;
    private url: string = 'app/api/restaurant.json'

    constructor(private http: Http){}

    getRestaurantFromAPIWithCache() {

        if (this.data) {
            return Observable.of(this.data);
        } else if (this.observable) {
            return this.observable;
        } else {
            this.observable = this.http
                .get(this.url)
                .map(res => res.json())
                .map(response => {
                    this.observable = null;
                    this.data = response;
                    return this.data;
                })
                .catch(error => {
                    let errorMsg = 'une erreur ${error.status} est survenu en tentant de joindre ${error.url}';
                    return Observable.throw(errorMsg);
                });

            return this.observable;
        }
    }

    getRestaurantById(id:any) {
        if (!this.data) {
            return undefined;
        }
        const result = this.data.filter((resto: any) => resto.id === id);
        console.log("Dans restoServices: "+result);
        if (result.length > 0) {
            return result[0]; // recupère le premier élément du tableau
        }
    }

}

///////////////////////restaurant.list.ts/////////////////

import { Component, OnInit } from "@angular/core";
import { Restaurant } from "./class/restaurant.class";

import { RestaurantServices } from "./services/restaurant.services";

@Component({
  moduleId: module.id,
  templateUrl: "restaurant-list.component.html",
  styleUrls: ['./css/restaurant.css']
})

export class RestaurantListComponent implements OnInit {

  restos: Restaurant[];
  errorMsg: string = "";

  constructor(private _restoServices: RestaurantServices) { }

  ngOnInit() {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    this._restoServices.getRestaurantFromAPIWithCache()
      .subscribe(res => {
        this.restos = res.results;
      });
  }
}

///////////////////////restaurant.list.html/////////////////

<div *ngFor="let resto of restos">
<div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <div *ngFor="let images of resto.photos" >
            <img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=640&maxheight=640&photoreference={{images.photo_reference}}&key=AIzaSyA2VI_ZemIgFgbXo7sHtUms7E7NhURqhTw" alt="img">
          </div>
              <div class="caption">
                <h3>{{resto.name}}</h3>
                  <p id="cityArea">{{resto.vicinity}}</p>
                  <a [routerLink]="['/restaurant', resto.id]">
                    <button type="button" class="btn btn-info center-block" data-toggle="modal" data-target="#myModal">Details <span class="glyphicon glyphicon-info-sign"></span></button>
                  </a>
              </div>
         </div>
      </div>

///////////////////////restaurant.details.ts/////////////////

import { Component, OnInit, Input } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";

import { Restaurant } from "./class/restaurant.class";
import { RestaurantServices } from "./services/restaurant.services";

@Component({
    moduleId:module.id,
    selector:"resto-details",
    templateUrl:"restaurant-details.component.html",
    styleUrls:['./css/restaurant.css']
})

export class RestaurantDetailsComponent implements OnInit{

    @Input() rt:Restaurant;
    resto:Restaurant;
    title:string ="";

    constructor(private route:ActivatedRoute, private router:Router, private _restoServices:RestaurantServices){}

        ngOnInit() {
            //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
            //Add 'implements OnInit' to the class.

            let id= +this.route.snapshot.params['id'];
            this.resto= this._restoServices.getRestaurantById(id);
            console.log("ID detailPage "+ id);
        }

        goBack(){
            this.router.navigate(['/restaurant']);
        }

}

///////////////////////restaurant.details.html/////////////////

<resto-details [rt]="resto"></resto-details>

<br>
       <!-- Modal -->
  <div *ngIf="resto">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h2 class="modal-title" id="myModalLabel">{{ rt.name }}</h2>
          </div>
          <div class="modal-body">
              <!-- Description du restaurant  -->
              <div>{{ rt.name }}</div>
              <div>{{ rt.vicinity | uppercase}}</div><br>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" (click)='goBack()'>Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>              
<div *ngIf="!resto">Pas de Restaurant correspondant trouvée</div>

Ce que je veux

Je cherche à récupérer les informations d'un restaurant via son ID