Unable to import with SystemJS

[jbouzekri]

Hi,

Sorry to bother you with that but I am unable to use SystemJS to import your plugin.

I have added to the map object of systemJs :

'notifications': 'node_modules/angular2-notifications'

And to the packages object :

'notifications': { main: 'components.js', defaultExtension: 'js' }

Then in my component ts file, I just do :

import { SimpleNotificationsComponent } from 'notifications'

However, when I run tsc, I always have this error : app/components/core/app/app.component.ts(4,46): error TS2307: Cannot find module 'notifications

Am I doing something wrong ?

Thanks in advance

Regards

[flauc]

Hi,

Please don't apologize it's no problem at all :)

You're doing everything right. I actually get the same error. I also get a lot of errors related to @angular/core and even more from rxjs, but everything still compiles and the notifications work.

I think the errors are more like warnings and typescript is searching for modules he can't find, but that's okay because typescript shouldn't be compiling thous modules in the first place.

Do notifications work for you regardless of the tsc errors?

[jbouzekri]

For me, the compilation stops. I use the angular quickstart repository.

My version of typescript and systemjs :

"typescript": "^1.8.10"
"systemjs": "0.19.27"

[jbouzekri]

I don't know if it helps but I had the same kind of issue when using lodash and I had to install the typings globally then runs :

typings install lodash --ambient --save

You can look into this repository https://github.com/auth0/angular2-jwt which installs correctly by npm. I see some things related to typings in the scripts session of package.json.

[gc392]

Hi I filled a request @ typings/registry#429

When they add it to the registry I think we will be able to do
typings install angular2-notifications

and compile source

[flauc]

Hi @gc392

Thank you for the help 👍

[jbouzekri]

I just made a pull request #26 which should fix this. Let me know what you think.

[flauc]

I've merged it. Your approach was better then mine, thank you for the help. I'll publish the new version to npm later today.

[theunreal]

I've been wondering why it happens for hours, until I saw this issue, thanks for the fix, works now!

[johnnyPescarul]

I am still having issues with SystemJS recognizing the the module. I have followed the instructions and added the following to my system-config.ts file ( I am using angular-cli) but I am still having the error "[ts]Cannot find module 'notifications' "
`map -> 'notifications': 'node_modules/angular2-notifications'

packages -> 'notifications': { main: 'components.js', defaultExtension: 'js' }
`
I have also tried with what others recommended and include "../angular2-notifications/components.js" in the SystemJS map, but still could not solve the problem. Do you have any updated instructions on how to exactly use this with the latest angular2-rc version and SystemJS?

[rkralston]

What do we need to map into /vendor for angular-cli?

I'm guessing we need components.js, do we also need the library?

[flauc]

I think components.js is all you need. But i'm not quite sure please let me know how it goes.

[RenanCostaNascimento]

@johnnyPescarul I had the same problem, fixed it by changing the name of the module in system.config.js to "angular2-notifications".

system.config.js:

var map = {
    'angular2-notifications':     'node_modules/angular2-notifications'
  };

var packages = {
    'angular2-notifications':     { main: 'components.js', defaultExtension: 'js' }
  };

component.ts:
import {NotificationsService, SimpleNotificationsComponent} from "angular2-notifications"

[rkralston]

You also need to include a reference in angular-cli-build.js in the vendorNpmFiles array:
'angular2-notifications/.js',
'angular2-notifications/lib..+(js|js.map)'

You should then change the map statement above to

var map = {
'angular2-notifications': 'vendor/angular2-notifications'
};

CLI has been asking us to include the format key in the package like so:

'angular2-notifications': {
defaultExtension: 'js',
main: 'components.js',
format: 'cjs'
}

This will move all the files to vendor for dev and production building. In CLI, this gives you a more compact application for distribution. The format key helps broccoli sort things out a little better.

[Dill1]

@rkralston Thanks, changing the name from notifications to angular2-notifications did it for me. It was working but giving me those warnings. I didn't know the name mattered, I thought it was just a key to map between the import and what is listed in systemjs.config. @flauc, perhaps you can update the documentation accordingly? You have a great module and well documented, it would be a shame for someone to be scared off over something this minor. Thanks.

[flauc]

Hi @Dill1

I got the same impression like you did. I was completely sure that the names doesn't matter, but looks like i was wrong. I'll update the docs.

Thanks for the heads up 👍

[oytuntez]

Thanks a lot, @rkralston, your comment guided correctly.

Using:

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"angular2-notifications": "^0.3.1",

These were the lines that I needed to add (see the asterisks)

'angular2-notifications/*.+(js|js.map)',
'angular2-notifications/lib/*.+(js|js.map)'

I am sending a quick PR to add a note to documentation for this issue.

[chriscurnow]

I simply have not been able to get this to work with Angular-CLI.

I don't know what the "note about defining directories in angular-cli-builder" means. Where should you add this code?

It would help a lot if you could write a more detailed set of instructions for Angular CLI.

If I could work out how implement this with Angular-CLI I would happily write something and create a PR.