Angular 2 如何使用子依赖项 angular-cli 加载第 3 方供应商节点模块 [英] Angular 2 how to load 3rd party vendor node modules with sub dependencies angular-cli

问题描述

在 Angular 2 中加载 单节点模块一个 href="https://github.com/angular/angular-cli" rel="nofollow">angular-cli 引导项目在 wiki 中有很好的描述.只是好奇，我如何在使用 angular-cli 引导的项目中很好地加载更复杂的节点模块?

Loading a single node module in Angular 2 an angular-cli bootstraped project is described within the wiki pretty well. Just being curious, how do I nicely load a more complex node module within a project bootstrapped with angular-cli?

例如angular2-apollo 依赖于几个子依赖项，如 apollo-client、graphql、lodash、...

E.g. angular2-apollo relies on several sub-dependencies like 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 加载子依赖项?

However this is only loading angular2-apollo. The sub-dependencies of angular2-apollo are not getting loaded. How do I load subdependencies with system.js within angular-cli bootstraped project?

推荐答案

因此，您在 System.js 中遇到了一个非常烦人的问题，并且在 Angular CLI 上有一个关于该问题的未决问题:https://github.com/angular/angular-cli/issues/882

So, you are facing a really annoying problem with System.js and there is an open issue about that on the Angular CLI here: https://github.com/angular/angular-cli/issues/882

这基本上意味着您必须在 system.config.ts 文件中指定所有依赖项，并将它们全部加载到 angular-cli-build.js 文件中....可怕的我知道...

It basically means you have to specify all the dependencies in the system.config.ts file and load them all in the angular-cli-build.js file.... horrible I know...

也许将来会发生:https://github.com/angular/angular-cli/issues/909

但是，在 Angular CLI 变得更好之前，这里有一个包含 Angular 2.0 和 angular2-apollo 及其所有依赖项(甚至还有一个模拟 GraphQL 服务器..)的入门应用程序 - https://github.com/Urigo/apollo-ship

But, until the Angular CLI will become better, here is a starter app that includes Angular 2.0 and angular2-apollo with all it's dependencies (and even with a mock GraphQL server..) - https://github.com/Urigo/apollo-ship

您可以查看 system.config.ts 和 angular-cli-build.js 在那里查看如何包含对 angular2-apollo、apollo-client、lodash(以及所有需要的依赖项)的依赖它)、redux 以及更多(太多....)

You can check out the system.config.ts and the angular-cli-build.js in there to see how to include dependencies on angular2-apollo, apollo-client, lodash (and all the wanted dependencies of it), redux and many many more (too many....)

这篇关于Angular 2 如何使用子依赖项 angular-cli 加载第 3 方供应商节点模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！