angular2-notifications: Unable to import with SystemJS

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

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 17 (9 by maintainers)

Commits related to this issue

Most upvoted comments

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.

@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"

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.