loading 3rd party vendor node modules with sub dependencies

[manuelfink]

Loading a single node module 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.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?

Wouldn't it be awesome having an ng helper registering and loading third party libraries?

[guidorice]

This is an important issue- both in regards the documentation, but also for newcomers using angular-cli, like me. The first thing I tried to do with my new angular-cli project is use a commonjs module (which does not have typescript typings)

var myModule = require('some_mod'); //  exists in node_packages

That did not work, because the build system doesn't know about require(). I hit upon this after some searching.

declare function require(moduleName: string): any;

But that didn't solve it either- the require cannot resolve the path to node_modules.

The wiki article mentioned above helps, for small bits of code in vendorNpmFiles, but if it cannot discover commonjs module dependencies, I can't see how it would be useful at all in practice.

Now I am thinking I will have to replace the angular-cli provided build and bundle scripts with a webpack implementation. Unless anyone else has pointers for how to accomplish the subject of this issue?

[filipesilva]

Currently, all subdependencies you need have to be declared for the build system to pick them up.

We are working on improving this, and there is an issue tracking it in #882.

@guidorice try importing it via typescript: import * as some_mod from 'some_mod'.

[Urigo]

until #882 will be solved, here is an example of a project with angular2-apollo, lodash and many more dependencies - (explanation and help in this SO answer - http://stackoverflow.com/a/38317093/1426570)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}