Problem using with angular-cli webpack 1.0.0-beta.14

Hi, I’m trying to use this module with no luck. My project is using the latest from angular-cli so no system.js anymore. Therefore, the setup pard of the readme.md is irrelevant for me.

In my app.module.ts I import: import { SimpleNotificationsModule, NotificationsService } from 'angular2-notifications';. SimpleNotificationsModule goes to the import array and NotificationsService is going to the providers array (which wasn’t in the readme.md file but seems needed, wouldn’t it?).

In the app.component.html I simply added <simple-notifications [options]="options"></simple-notifications> to the 1st row. And that’s it, no more calls at this stage.

Can you help me configure this in angular-cli.json, if needed? The errors I get:

error_handler.js:45EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:22 caused by: Cannot convert undefined or null to objectErrorHandler.handleError @ error_handler.js:45(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357 error_handler.js:47ORIGINAL EXCEPTION: Cannot convert undefined or null to objectErrorHandler.handleError @ error_handler.js:47(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357 error_handler.js:50ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357 error_handler.js:51TypeError: Cannot convert undefined or null to object at SimpleNotificationsComponent.attachChanges (simple-notifications.component.js:110) at SimpleNotificationsComponent.set [as options] (simple-notifications.component.js:36) at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.ngfactory.js:59) at DebugAppView.AppView.detectChanges (view.js:272) at DebugAppView.detectChanges (view.js:377) at DebugAppView.AppView.detectViewChildrenChanges (view.js:298) at DebugAppView.AppView.detectChangesInternal (view.js:283) at DebugAppView.AppView.detectChanges (view.js:272) at DebugAppView.detectChanges (view.js:377) at ViewRef_.detectChanges (view_ref.js:130)ErrorHandler.handleError @ error_handler.js:51(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357 error_handler.js:54ERROR CONTEXT:ErrorHandler.handleError @ error_handler.js:54(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357 error_handler.js:55DebugContext {_view: _View_AppComponent0, _nodeIndex: 0, _tplRow: 0, _tplCol: 22}ErrorHandler.handleError @ error_handler.js:55(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357 zone.js:344Unhandled Promise rejection: Error in ./AppComponent class AppComponent - inline template:0:22 caused by: Cannot convert undefined or null to object ; Zone: <root> ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in ./AppComponent class AppComponent - inline template:0:22 caused by: Cannot convert u…, originalError: TypeError: Cannot convert undefined or null to object at SimpleNotificationsComponent.attachChan…, context: DebugContext} TypeError: Cannot convert undefined or null to object at SimpleNotificationsComponent.attachChanges (http://localhost:4200/main.bundle.js:49219:16) at SimpleNotificationsComponent.set [as options] (http://localhost:4200/main.bundle.js:49145:18) at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.ngfactory.js:59:52) at DebugAppView.AppView.detectChanges (http://localhost:4200/main.bundle.js:62539:14) at DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:62644:44) at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:62565:19) at DebugAppView.AppView.detectChangesInternal (http://localhost:4200/main.bundle.js:62550:14) at DebugAppView.AppView.detectChanges (http://localhost:4200/main.bundle.js:62539:14) at DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:62644:44) at ViewRef_.detectChanges (http://localhost:4200/main.bundle.js:44554:20)consoleError @ zone.js:344_loop_1 @ zone.js:371drainMicroTaskQueue @ zone.js:375 zone.js:346Error: Uncaught (in promise): Error: Error in ./AppComponent class AppComponent - inline template:0:22 caused by: Cannot convert undefined or null to object(…)consoleError @ zone.js:346_loop_1 @ zone.js:371drainMicroTaskQueue @ zone.js:375

I also tried to add the file to the script array in the json file: ../node_modules/angular2-notifications/components.js but that of course wouldn’t work due to:

VM1017:1Uncaught ReferenceError: exports is not defined(anonymous function) @ VM1017:1module.exports @ addScript.js:9242 @ components.js?adcb:1__webpack_require__ @ bootstrap 0def24d…:52727 @ addScript.js:10__webpack_require__ @ bootstrap 0def24d…:52webpackJsonpCallback @ bootstrap 0def24d…:23(anonymous function) @ scripts.bundle.js:1 metadata_resolver.js:235Uncaught Error: Unexpected value 'undefined' imported by the module 'AppModule'

I have tried adding other files from lib or src and it didn’t work. Do you have a solution for that?

Thanks.

[mrgoos]

@flauc - please ignore the lase comment. It’s because I had (onCreate)="created($event)" with no implementation. So everything is working great! Thanks for this module.

[mrgoos]

Hey @flauc - So I have some progress here. I had that error since I haven’t declared options object in my .component.ts. After declaring the options it has no errors anymore. And I have made some research re 3rd parties libs in angular-cli. So it seems that since you’re module exports modules, I can do as it says in their readme which is to just import modules and I have no errors about it.

The problem is, when I do try to test it I get another error: error_handler.js:45 EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:42 caused by: self.context.created is not a functionErrorHandler.handleError @ error_handler.js:45next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:196Zone.runGuarded @ zone.js:102NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72NgZone.runGuarded @ ng_zone.js:236outsideHandler @ dom_events.js:26ZoneDelegate.invokeTask @ zone.js:225Zone.runTask @ zone.js:125ZoneTask.invoke @ zone.js:293 error_handler.js:47 ORIGINAL EXCEPTION: self.context.created is not a function......

I just added a button to test it: <button (click)="test()">Test Error</button> And in the implementation I have: test() { this._notificationsService.success('example title', 'example content'); }

I added this to the constructor: constructor(private _notificationsService: NotificationsService) { }; BTW - shouldn’t you add to your readme that you need to put NotificationsService as a global provider?

Can you estimate what’s wrong now? Thanks