Angular 2如何使用子依賴性angular-cli加載第三方供應商節點模塊

Question

在Angular 2中加載單個節點模塊 ，在Wiki中很好地描述了angular-cli bootstraped項目。 只是好奇，如何在用angular-cli引導的項目中很好地加載更復雜的節點模塊？

例如，angular2-apollo依賴於幾個子依賴項，例如apollo-client，graphql，lodash，...

我將節點模塊添加到angular-cli-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      '...', 
      'angular2-apollo/**'
    ]
  });
};

並在其中注冊了節點模塊ins system-config.js

const barrels: string[] = [
  // ...
  // Thirdparty barrels.
  'rxjs',
  'angular2-apollo',

  // App specific barrels.
  // ...
];

// ...

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'angular2-apollo':'vendor/angular2-apollo/build/src',

    'main': 'main.js',
  },
  packages: cliSystemConfigPackages
});

但是，這僅加載angular2-apollo。 沒有加載angular2-apollo的子依賴項。 如何在angular-cli引導項目中使用system.js加載子依賴項？

Answer 1

因此，您面臨着System.js的一個非常煩人的問題，並且在Angular CLI上有一個關於此的公開問題： https : //github.com/angular/angular-cli/issues/882

基本上，這意味着您必須在system.config.ts文件中指定所有依賴項，並將它們全部加載到angular-cli-build.js文件中。

也許將來會發生： https : //github.com/angular/angular-cli/issues/909

但是，直到Angular CLI變得更好之前，這是一個入門應用程序，其中包括Angular 2.0和angular2-apollo及其所有依賴項（甚至包括模擬GraphQL服務器。）-https: //github.com/Urigo/apollo -船

您可以在其中查看system.config.ts和angular-cli-build.js ，以了解如何包括對angular2-apollo ， apollo-client ， lodash （及其所有所需的依賴項）， redux和許多依賴項的依賴項還有更多（太多...）

Answer 2

我認為您在system.config.ts中做錯了。 用戶軟件包配置應在此文件的上部。

const map: any = {
  'angular2-apollo': 'vendor/angular2-apollo/build'
};
/** User packages configuration. */
const packages: any = {
  'angular2-apollo': { main: 'main.js', defaultExtension: 'js' },

};

看看是否對您有幫助？