Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to import with SystemJS #25

Closed
jbouzekri opened this issue May 11, 2016 · 17 comments
Closed

Unable to import with SystemJS #25

jbouzekri opened this issue May 11, 2016 · 17 comments

Comments

@jbouzekri
Copy link
Contributor

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
Copy link
Owner

flauc commented May 11, 2016

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
Copy link
Contributor Author

jbouzekri commented May 11, 2016

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
Copy link
Contributor Author

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
Copy link

gc392 commented May 19, 2016

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
Copy link
Owner

flauc commented May 19, 2016

Hi @gc392

Thank you for the help 👍

@jbouzekri
Copy link
Contributor Author

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

@flauc
Copy link
Owner

flauc commented May 20, 2016

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
Copy link

theunreal commented May 20, 2016

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

@flauc flauc closed this as completed May 23, 2016
@johnnyPescarul
Copy link

johnnyPescarul commented Jun 27, 2016

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
Copy link

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
Copy link
Owner

flauc commented Jul 11, 2016

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

@RenanCostaNascimento
Copy link

RenanCostaNascimento commented Jul 14, 2016

@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
Copy link

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
Copy link

Dill1 commented Aug 25, 2016

@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
Copy link
Owner

flauc commented Aug 25, 2016

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
Copy link
Contributor

oytuntez commented Aug 27, 2016

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.

oytuntez added a commit to oytuntez/angular2-notifications that referenced this issue Aug 27, 2016
flauc added a commit that referenced this issue Dec 21, 2016
@chriscurnow
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

10 participants