Angular-cli: npm 종속성이 있는 타사 라이브러리 또는 cli 도구 지원에 대한 예제를 제공하세요.

노드 버전 v4.4.6, npm 버전 v2.15.5

기존의 타사 libs wiki 페이지는 훌륭합니다.

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

그러나 현재 예제의 3개 모두에는 npm 종속성이 없습니다. 오늘 저는 npm에서 angular2-clipboard를 사용하려고 했지만 클립보드에 따라 달라지며, 이 클립보드는 3개의 다른 모듈에 의존합니다. 작동시키려면 AFAICT 5개 모듈 모두에 대한 매핑을 SystemJS에 제공해야 했습니다. npmcdn을 사용할 때 처음 2개만 필요했는지 확실하지 않지만 로컬 버전을 사용하면 클립보드의 3개 종속성에 대한 요구가 해결되지 않습니다.

해당 모듈을 해결하는 데 잘못된 접근 방식을 취하고 있었습니까? 그렇지 않은 경우 cli 도구가 npm 종속성과 해당 package.json 파일을 보고 종속성 트리에서 매핑해야 할 파일을 파악할 수 있는 것 같습니다. 분명히 이 트리는 npm v2를 사용했기 때문에 npm v3이 더 평평했을 것이지만 AFAICT는 지정된 타사 라이브러리 아래 트리의 각 종속성을 매핑해야 하는 것과 동일한 문제가 존재합니다.

"ng install-lib angular2-module" 또는 이와 유사한 기능을 사용하여 이러한 단계를 자동화하고 싶습니다. FWIW - 이를 수행하기에 충분한 데이터가 package.json 파일에 있는 것 같습니다. angular2 릴리스로 타사 angular2 구성 요소를 설치하려면 CLI 지원이 있으면 훨씬 좋을 것입니다. :웃다:

젠장, 기존 package.json 파일에 데이터가 _없으면_ 필요한 데이터를 _제공할_ 수 있도록 해당 프로젝트에서 추가할 수 있는 angular-cli.json(또는 angular-cli-package.json 또는 기타)을 정의하십시오. :웃다:

어쨌든 다음은 angular2-clipboard를 작동시키는 데 사용한 systemjs 구성입니다. 더 간단하고 더 나은 방법이 있고 여기서 실제 문제는 대신 PEBCAK입니다. :눈짓:

/***********************************************************************************************
 * 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' },
};