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

[mrgoos]

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.

[flauc]

Hi @mrgoos,

With every new release of Angular there seem so be new errors with the CLI integration. I don't personally use Angular CLI so i don't have any first hand experience to share. There were however quit a few issues open on this topic. For starters take a look at this three: #60 #45 #25

I hope this helps. Let me know how it goes 👍

[mrgoos]

Thanks for your reply.
Yeah... I looked at those issues and searched through your repository thoroughly before issuing :)
I guess I'll have to wait for someone else who tried it since the cli release with webpack is pretty new.
I'm doing what is written in their DOCs re 3rd party libraries:
https://github.com/angular/angular-cli#3rd-party-library-installation
And can't seem to figure out how to accomplish this.

Thanks.

[flauc]

The problem with the explanation on Angular CLI is that it refers only to single js files where as this library uses a modular approach and requires a module loader. I'll try to find an explanation on how to do this with webpack and get back to you.

Sorry I couldn't offer any real help.

[mrgoos]

I'm not even sure that I need to include any file since the explanation there for installing a 3rd party library says just to npm install it and that's it. Seems like it should work OOTB.
WDYT?

p.s. I even installed the types:
https://www.npmjs.com/package/@types/angular-notifications
Oh, I see now that it's a different package.

[flauc]

I don't think it could work like that. I mean how would webpack know to look in to components.js and not some other file if you don't specify that anywhere?

[mrgoos]

Magic? 😆

[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

[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]

@flauc - I do however wonder why you haven't written in the readme file that NotificationsService needs to be added to the providers array. The strange thing is, when I remove it from the array it still works.