Angular 2: невозможно прочитать свойство then для неопределенного для push-уведомления

Я пытаюсь показать push-уведомление при нажатии кнопки.

Я застрял с угловой ошибкой обещания, которая гласит:

Невозможно прочитать свойство "then" неопределенного

Полная трассировка стека ошибок:

Ошибка при сбое: ошибка в. /AppComponent классе AppComponent - встроенный шаблон: 17: 2 вызван: не удается прочитать свойство "then" неопределенного

TypeError: Невозможно прочитать свойство "then" неопределенного в PushNotificationComponent.show(notification.component.js: 42) в DebugAppView.View_AppComponent0.handleEvent_16 (/AppModule/AppComponent/component.ngfactory.js:129) в DebugAppView.eventHandler(view. js: 664) в HTMLButtonElement.COMPONENT_REGEX (dom_renderer.js: 489) в ZoneDelegate.invokeTask(zone.js: 367) в Object.NgZone.forkInnerZoneWithAngularBehavior.inner.inner.fork.onInvokeTask(ng_zone.js: 264) в ZoneDelegate. invokeTask (zone.js: 366) в Zone.runTask(zone.js: 166) в HTMLButtonElement.cancelFn.invoke(zone.js: 420)

Я использую ссылку github:

https://github.com/alexcastillo/ng2-notifications/blob/master/src/app/app.component.html

Мой app.module.ts выглядит так:

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

import { AppComponent } from './app.component';

import { PushNotificationComponent } from 'ng2-notifications/src/app/components/notification.component';

@NgModule({
   declarations: [
    AppComponent,
    PushNotificationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import {
  Directive,
  EventEmitter,
  OnInit,
  OnChanges,
  OnDestroy,
  Input,
  Output
} from '@angular/core';

import '../style/app.scss';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
 })
@Directive({
 selector: 'push-notification'
})
export class AppComponent {
  title: string = 'ng2-notifications';
  description: string = 'Angular 2 Component for Native Push Notifications';

  constructor() {
  }
}

app.component.html

<header>
    <h1 class="title">{{ title }}</h1>
</header>
<main>

    <h2>{{ description }}</h2>

    <img src="img/demo.gif">

    <push-notification #notification title="ng2-notifications" body="Native Push Notifications in Angular 2" icon="<some_ulr>" closeDelay="2000" (load)="notification.show()"> //Problem Here!!
    </push-notification>

    <button (click)="notification.show()">Show Notification</button>

</main>

Если я удалю строку: (load)="notification.show() она кажется прекрасной, но она не служит ни одной цели без уведомления после нажатия кнопки!