title: Angular 2 how to load 3rd party vendor node modules with sub dependencies angular-cli
body: <p>Loading a <a href="https://github.com/angular/angular-cli/wiki/3rd-party-libs" rel="nofollow">single node module</a> in Angular 2 an <a href="https://github.com/angular/angular-cli" rel="nofollow">angular-cli</a> 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?</p>
  
  <p>E.g. angular2-apollo relies on several sub-dependencies like apollo-client, graphql, lodash, ...</p>
  
  <p>I added the node module to <code>angular-cli-build.js</code></p>
  
  <pre><code>var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
  
  module.exports = function(defaults) {
    return new Angular2App(defaults, {
      vendorNpmFiles: [
        '...', 
        'angular2-apollo/**'
      ]
    });
  };
  </code></pre>
  
  <p>And registered the node module ins <code>system-config.js</code> with</p>
  
  <pre><code>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
  });
  </code></pre>
  
  <p>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?</p>