Angular-cli: please provide either examples for 3rd-party libraries with npm dependencies or support in the cli tool

Created on 10 Jul 2016  ·  2Comments  ·  Source: angular/angular-cli

Node version v4.4.6, npm version v2.15.5

The existing 3rd-party libs wiki page is great:

https://github.com/angular/angular-cli/wiki/3rd-party-libs

However, all 3 of the current examples don't have npm dependencies. Today I was trying to use angular2-clipboard from npm, but it depends on clipboard which in turn depends on 3 other modules. To get it to work, AFAICT I had to provide mappings for all 5 modules to SystemJS. I'm not sure I only needed the first 2 when I was using npmcdn, though, but once using the local version the require for the 3 dependencies of clipboard stopped resolving.

Was I taking the wrong approach to getting those modules to resolve? If not, it seems like the cli tool could look at the npm dependencies and their package.json files to figure out which files in the tree of dependencies would need to be mapped? Admittedly, this tree was due to using npm v2 and npm v3 would have been flatter, but AFAICT the same issue would exist with needing to map each dependency in the tree underneath a given third-party lib.

Would love to have the ability to "ng install-lib angular2-module" or something like that to automate these steps, FWIW - seems like there's enough data in the package.json files to do so, and with the hopefully fast-growing ecosystem of 3rd party angular2 components as angular2 releases, it'd be much nicer to have CLI support to install them. :smile:

Heck, if there _isn't_ enough data in the existing package.json files, define an angular-cli.json (or angular-cli-package.json or whatever) that such projects could add that _would_ provide the necessary data. :smile:

In any case, here's the systemjs config I ended up using to get angular2-clipboard working - please let me know if there's a simpler/better way and the real issue here is PEBCAK instead. :wink:

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  // 'angular2-clipboard':         'https://npmcdn.com/[email protected]',
  // 'clipboard':                  'https://npmcdn.com/[email protected]/dist/clipboard.js',

    'angular2-clipboard': 'vendor/angular2-clipboard',
    'clipboard':          'vendor/angular2-clipboard/node_modules/clipboard/lib/clipboard.js',
    'tiny-emitter':       'vendor/angular2-clipboard/node_modules/clipboard/node_modules/tiny-emitter/index.js',
    'good-listener':      'vendor/angular2-clipboard/node_modules/clipboard/node_modules/good-listener/dist/good-listener.js',
    'select':             'vendor/angular2-clipboard/node_modules/clipboard/node_modules/select/dist/select.js',
};

/** User packages configuration. */
const packages: any = {
    'angular2-clipboard': { main: 'index.js', defaultExtension: 'js' },
};
RFC / discussion / question

Most helpful comment

Closed as issue was made obsolete by #1455. This scenario should now just work.

All 2 comments

Closed as issue was made obsolete by #1455. This scenario should now just work.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings