Angular 2 如何加载具有子依赖项的 3rd 方供应商节点模块 angular-cli

Question

在 Angular 2 中加载一个 single node module 一个 angular-cli 引导项目在 wiki 中有很好的描述。只是好奇，如何在使用 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/**'
    ]
  });
};

并在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-ship

您可以查看其中的 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' },

};

看看对你有没有帮助？