How to make it working in webpack?

[xinzhang]

There is no example to include it with webpack (angular-cli) template.

I followed the toast notification documentation to add the SimpleNotificationComponent in the module Then in the component, I injected the notificationService to call it.

However, there is no issue in running webapack build but I am getting the below error. metadata_resolver.js:227Uncaught Error: Unexpected directive 'SimpleNotificationsComponent' imported by the module '....Module'

What could be the issue? Is there a better example to use it in a webpack template or angular-cli template?

[olakara]

Hi, I am in the process of creating an application template using CLI and some of the libraries. For a simple example have a look at my new template repository. https://github.com/olakara/ng2-app-template I have added the angular2-notifications to the CLI based application.

[xinzhang]

Hi, I get it working and here is what to do,

In the module, import {SimpleNotificationsModule, PushNotificationsModule} from 'angular2-notifications'; and add the modules into imports:[....]

In the component, include the tag in the component.html <simple-notifications [options]="options" (onCreate)="onCreate($event)" (onDestroy)="onDestroy($event)">

then in the component to add the below declaration import {NotificationsService, SimpleNotificationsComponent} from 'angular2-notifications'; and add the NotificationsService in the constructor, and show notification by calling this.notificationService.success("title", "...");

Thanks.

[ghost]

It works on development mode, but when try to generate a distribution version using UglifyJsPlugin it triggers an error:

ERROR in app.c3b86f6b3725dad90c4b.js from UglifyJs
SyntaxError: Unexpected token: name (NotificationsService) [app.c3b86f6b3725dad90c4b.js:11,6]

[notprathap]

Pls check 112

[egel]

I follow @xinzhang solution and I found this almost 100% accurate to my project built with webpack. TY @xinzhang ! :+1: