Integrating angular2-apollo into the Angular2 quickstart project

[pso-aeb]

node/npm/angular2 beginner here.

I did the Angular2 Tutorial at https://angular.io/docs/ts/latest/tutorial/
I am now trying to integrate angular2-apollo into this project.

Yet, the Angular2 setup (with SystemJS) does not seem to work with angular2-apollo.

I tried both "npm install angular2-apollo" and including it in my package.json.
The install was successful and I have all necessary files in my node_modules folder (.js etc).
But as soon as I my code has an import from angular2-apollo (or from apollo-client) I get a 404 on Client-side.
I tried including the angular2-apollo modules via SystemJS, but that just leads to further missing modules which lead to further missing modules, and so on.

Can somebody provide any help?

[kamilkisiela]

@pso-aeb I'm not that familiar with SystemJS but in the very next release of angular2-apollo there will be only 1 dependency: lodash and 2 peer dependencies: apollo-client and @angular/core.

So it would be easier for you to install angular2-apollo.

If a problem with missing modules of apollo-client will remain then you should talk directly to guys from that library.

[pso-aeb]

Thanks for your answer!

I managed to get it running by now.
The solution is to actually add all dependencies in the SystemJS config.

[kamilkisiela]

Hi @pso-aeb !

Isn't it painful to add every indirect dependency manually? Does SystemJS suppose to work that way?

[pso-aeb]

It is somewhat painful, but doable.
I am not an expert in SystemJS, but it seems that way. You can also use SystemJS to create a single minified JS-file, so it somehow needs to know all required packages and how to include them.

[manuelfink]

@pso-aeb I think it would be a good idea to reopen this thread. SystemJS is supposed to be able to load node_modules with subdependencies however I didn't got it working with angular2-apollo yet. However I guess its ways more convenient to load the library and let the sub dependencies automatically be loaded.

[manuelfink]

@pso-aeb got an message you uploaded an config file as sample ... however its not here any more. Can you share it again?

[pso-aeb]

@manuelfink Upload is blocked by the local network setting. I will upload when I am at home

[pso-aeb]

config.zip
Config files that worked for me.

[kamilkisiela]

@pso-aeb's systemjs.config.js:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'app':                        'app', // 'dist',
        '@angular':                   'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs':                       'node_modules/rxjs',

        'angular2-apollo':            'node_modules/angular2-apollo',
        'apollo-client':              'node_modules/apollo-client',

        'whatwg-fetch':               'node_modules/whatwg-fetch',
        'redux':                      'node_modules/redux',
        'graphql':                    'node_modules/graphql',
        'symbol-observable':          'node_modules/symbol-observable',
        'babel-runtime':              'node_modules/babel-runtime',
        'core-js':                    'node_modules/core-js',
        'core-js/library/fn/symbol':  'node_modules/core-js/library/fn/symbol',
        'lodash':                     'node_modules/lodash',
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },

        'angular2-apollo':            { main: 'build/src/index.js', defaultExtension: 'js' },
        'apollo-client':              { main: 'index.js', defaultExtension: 'js' },

        'whatwg-fetch':               { main: 'fetch.js', defaultExtension: 'js' },
        'redux':                      { main: 'dist/redux.js', defaultExtension: 'js' },
        'graphql':                    { main: 'index.js', defaultExtension: 'js' },
        'symbol-observable':          { main: 'index.js', defaultExtension: 'js' },
        'babel-runtime':              { main: 'core-js.js', defaultExtension: 'js' },
        'core-js':                    { main: 'index.js', defaultExtension: 'js' },
        'lodash':                     { main: 'index.js', defaultExtension: 'js' },
        'core-js/library/fn/symbol':  { main: 'index.js', defaultExtension: 'js' },
    };

    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade',
    ];
    // Add package entries for angular packages
    ngPackageNames.forEach(function(pkgName) {
        packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
    });

    var lodashPackageNames = [
        'isundefined',
        'isstring',
        'assign',
        'forown',
        'isequal',
        'countby',
        'identity',
        'clonedeep',
        'isarray',
        'isnull',
        'has',
        'includes',
        'keys',
        'rest',
        '_baseclone',
        '_basefor',
        '_baseeach',
        '_baseiteratee',
        '_basetostring',
        '_stringtopath',
        '_root',
    ];
    lodashPackageNames.forEach(function(pkgName) {
        map['lodash.'+pkgName] = 'node_modules/lodash.'+pkgName;
        packages['lodash.'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var gqlPackageNames = [
        'error',
        'execution',
        'language',
        'type',
        'utilities',
        'validation',
    ];
    gqlPackageNames.forEach(function(pkgName) {
        map['graphql/'+pkgName] = 'node_modules/graphql/'+pkgName;
        packages['graphql/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages,
        transpiler: false
        // when required: use babel  https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js
    }
    System.config(config);
})(this);