please provide either examples for 3rd-party libraries with npm dependencies or support in the cli tool #1315
Description
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. 😄
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. 😄
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. 😉
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
// 'angular2-clipboard': 'https://npmcdn.com/angular2-clipboard@0.2.8',
// 'clipboard': 'https://npmcdn.com/clipboard@1.5.10/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' },
};