RangeError, google maps directions service. angular2, SebastianM/angular2-google-maps

Question

I seek assistance on this error that i am getting when using the maps directions service, i am following on an issue Directions service #495 on the implementation of the google maps directions service with ng-2 and the SebastianM/angular2-google-maps, i am not sure if i am missing something, and i have really researched on this, and need assistance on where the error is coming from.

EXCEPTION: Uncaught (in promise): RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded

Here is the directions service component/directive, which i have declared in my module.ts,

import { Component, OnInit, Input } from '@angular/core';
import { MapsAPILoader, SebmGoogleMap, GoogleMapsAPIWrapper} from 'angular2-google-maps/core';
import { Session } from '../../../session';

declare var google: any;
@Component({
 selector: 'sebm-google-map-directions',
 templateUrl: 'app/modules/move_requests/components/sebm-google-directions.component.html',
 styleUrls: [
    'app/modules/move_requests/components/move_requests.component.css'
]
})

export class DirectionsMapDirective  implements OnInit {
  @Input() origin: any;
  @Input() destination: any;
constructor(private mapsAPI: MapsAPILoader,private mapsAPIWrapper: GoogleMapsAPIWrapper) {}

ngOnInit(): void {
    let latlngOrigin = Session.get('location_coordinates');
    let latlngDest = Session.get('to_location_coords');

    this.mapsAPIWrapper.getNativeMap().then(map =>{

    this.origin = new google.maps.LatLng(latlngOrigin.lat,latlngOrigin.lng);
    this.destination = new google.maps.LatLng(latlngDest.lat,latlngDest.lng);

        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        directionsDisplay.setMap(map);
        directionsService.route({
            origin: this.origin,
            destination: this.destination,
            waypoints: [],
            optimizeWaypoints: true,
            travelMode: 'DRIVING',

        },function (res: any, status: any){
            if( status === 'OK') {
                console.log("STATUS WAS OK");
                directionsDisplay.setDirections(res)
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });
    });
}

And in have this in the template

<sebm-google-map style="height: 300px;">
   <sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions>
</sebm-google-map>

Any assistance or suggestions that might lead me to resolving the error will be appreciated, thanks.

Answer 1

My fault was that i didn't have the directions services as a directive, but a component, i have moved the directions services to a Directive, and declared it in my module and then used it in as a html tag in the host component, if anyone wants to see the code, just comment on this question's thread.