Closed pso-aeb closed 8 years ago
@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.
Thanks for your answer!
I managed to get it running by now. The solution is to actually add all dependencies in the SystemJS config.
Hi @pso-aeb !
Isn't it painful to add every indirect dependency manually? Does SystemJS suppose to work that way?
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.
@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.
@pso-aeb got an message you uploaded an config file as sample ... however its not here any more. Can you share it again?
@manuelfink Upload is blocked by the local network setting. I will upload when I am at home
config.zip Config files that worked for me.
@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);
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);
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
@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 :
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.
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?