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

[pabx06]

also a beginer here. used apollo-angular used some of the config file above to corect a lot 404 error.
but still having one :

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',

      // Apollo dep
      'apollo-angular':'npm:apollo-angular/build/bundles/apollo.umd.js',
      'apollo-client-rxjs': 'npm:apollo-client-rxjs/build/bundles/apollo-rxjs.umd.js',//TODO:   '': 'npm:',
      'apollo-client': 'npm:apollo-client',
      'whatwg-fetch': 'npm:whatwg-fetch/fetch.js',
      'lodash': 'npm:lodash',
      'graphql-tag': 'npm:graphql-tag',
      /*
      'graphql-tag/printer': 'npm:graphql-tag/printer.js',
      'graphql-tag/parser': 'npm:graphql-tag/parser.js',
      'graphql-tag/loader': 'npm:graphql-tag/loader.js',
      'graphql-tag': 'npm:graphql-tag/index.js',



      'symbol-observable': 'npm:symbol-observable/es/index.js',


      'redux': 'npm:redux/dist/redux.min.js',

      'graphql-anywhere': 'npm:graphql-anywhere/lib/src/index.js',*/



    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'apollo-client': { main: 'index.js', defaultExtension: 'js' },
      'lodash':                     { main: 'index.js', defaultExtension: 'js' },
      'graphql-tag':                     { main: 'index.js', defaultExtension: 'js' },

    }
  });
})(this);

[Urigo]

I've created a PR for angular.io with live example using the Angular quickstart.
Check this out here is let me know if it helps - https://github.com/Urigo/angular.io/tree/graphql-cookbook/public/docs/_examples/heroes-graphql
It's very some configurations that are specific to the structure of the website but I believe it would still be useful.
Hope to get it merged soon for everyone to enjoy

[pabx06]

@Urigo you are my hero!
found the minimal subset of systemjs.config.json that worked for me from your files!

I am getting 404 error when apollo client requestion OPTIONS HTTP METHOD on my endpoint that work well using graphiql

Graphiql send POST:

also forget to say: my app is localhost:3000 graphql is localhost:8080. found noting about CORS in apollo documentations :

[stubailo]

You need to set up your web server to support CORS. That's not Apollo specific at all. If you're using express, you can use the cors NPM package for that.