Невозможно прочитать свойство 'route' из undefined - n gui -map Angular 6

Question

Я получаю ошибку ниже, когда собираюсь показать направления в ngiu-map.

Cannot read property 'route' of undefined
    at DirectionsRenderer.push../node_modules/@ngui/map/dist/@ngui/map.es5.js.DirectionsRenderer.showDirections (map.es5.js:1500)
    at DeliveriesComponent.push../src/app/forms/deliveries/deliveries.component.ts.DeliveriesComponent.showDirection (deliveries.component.ts:280)
    at DeliveriesComponent.push../src/app/forms/deliveries/deliveries.component.ts.DeliveriesComponent.showView (deliveries.component.ts:268)
    at Object.eval [as handleEvent] (DeliveriesComponent.ngfactory.js:69)
    at Object.handleEvent (core.js:10251)
    at Object.handleEvent (core.js:10796)
    at dispatchEvent (core.js:7710)
    at core.js:8154
    at HTMLButtonElement.<anonymous> (platform-browser.js:988)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

и вот моя реализация кода Typescript для n gui -map направлений

@ViewChild(DirectionsRenderer) directionsRendererDirective: DirectionsRenderer;

    directionsRenderer: google.maps.DirectionsRenderer;
    directionsResult: google.maps.DirectionsResult;
    direction: any = {
        origin: ' ',
        destination: ' ',
        travelMode: 'DRIVING'
    };

constructor(private cdr: ChangeDetectorRef) {
        console.log(this.columnModeSetting);
        window.onresize = () => {
            this.scrollBarHorizontal = (window.innerWidth < 960);
            this.columnModeSetting = (window.innerWidth < 960) ? 'standard' : 'force';
        };
    }


    ngOnInit() {
        this.directionsRendererDirective['initialized$'].subscribe(directionsRenderer => {
            this.directionsRenderer = directionsRenderer;
        });
    }

showView(selectedOrder: LiveOrderModel) {
        this.selectedOrder = selectedOrder;
        this.orderNo = this.selectedOrder.orderNo;
        this.direction.origin = this.selectedOrder.pickupAddress;
        this.direction.destination = this.selectedOrder.deliveryAddress;

        if (this.direction.origin !== ' ' && this.direction.destination !== ' ') {
            this.showDirection();
        }
        this.viewModal.show();
    }

    directionsChanged() {
        this.directionsResult = this.directionsRenderer.getDirections();
        this.cdr.detectChanges();
    }

    showDirection() {
        console.log('direction : ' + JSON.stringify(this.direction));
        this.directionsRendererDirective['showDirections'](this.direction);
    }

HTML реализация для n gui -карт направлений

<ngui-map [zoom]="zoomLevel" [styles]="styles" [center]="{lat: this.selectedOrder !== null ? this.selectedOrder.pickupLocation.latitude : 0 , lng:this.selectedOrder !== null ? this.selectedOrder.pickupLocation.longitude : 0}">
                                <directions-renderer
                                        [suppressMarkers]="true"
                                        [draggable]="true"
                                        panel="#my-panel"
                                        (directions_changed)="directionsChanged()"
                                        [directions-request]="direction">
                                </directions-renderer>
                            </ngui-map>

Я использовал этот пример (https://ng2-ui.github.io/map/# / direction-renderer ) для реализации этого вида карты Google. но когда я пытаюсь показать направление, в котором я получаю вышеупомянутую ошибку из библиотеки, мне нужна помощь, чтобы исправить это.