1

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?

E.g. angular2-apollo relies on several sub-dependencies like apollo-client, graphql, lodash, ...

I added the node module to angular-cli-build.js

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

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

And registered the node module ins system-config.js with

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
});

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?

Manuel
  • 9,112
  • 13
  • 70
  • 110

2 Answers2

5

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

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...

Maybe in the future that will happen: https://github.com/angular/angular-cli/issues/909

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

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....)

Urigo
  • 3,175
  • 21
  • 27
  • Apollo-ship is great! Thanks man! :) And I hope that in near future Angular-CLI supports webpack – Aral Roca Jul 12 '16 at 15:07
  • For those who can't get this to work, try the [solution here](http://stackoverflow.com/questions/37717759/why-i-am-not-able-to-import-lodash-in-angular2]). – JesterXL Jul 15 '16 at 16:46
  • @Urigo, was the build lately added to integrate it into angular2? Gonna check it out in the next days, however I'm pretty bussy right now. Maybe you'd like to update your apollo-ship and the anwser here with loading the build version? – Manuel Jul 26 '16 at 09:20
2

I think you are doing wrong in system.config.ts. User package configuration should be in the upper section of this file. 

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

};

See if it helps you ?

pd farhad
  • 6,352
  • 2
  • 28
  • 47
  • Realized this later on two. Doesn't make any difference though, since neither is able loading a node_module with sub-dependencies probably :-( – Manuel Jun 30 '16 at 08:46
  • I also integrated angular2-apollo in my project. There was not any problem in my side – pd farhad Jul 12 '16 at 08:51
  • Did you include it in meteor or any standalone app? I think the apollo build was recently added in reason of my inquiery to the apollo stack. Thx for showing. Gona check it in the next days – Manuel Jul 26 '16 at 09:18