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.