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

Question

在 Angular 2 中加载单节点模块 一个 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/**'
]
});
};

并注册了节点模块 inssystem-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 引导项目中加载系统.js的子依赖项？

Answer 1

因此，您在系统中遇到了一个非常烦人的问题.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' },
};

看看它是否对你有帮助？