Apollo-angular: Version 1.0 - How to set up the mappings? (Transpile error)

[crumhorn]

I'm trying to upgrade to the newer versions of everything Apollo/GraphQL.

_Here's package.json versions_

    "apollo-angular": "^1.0.0",
    "apollo-angular-link-http": "^1.0.0",
    "apollo-client": "^2.0.2",
    "apollo-cache-inmemory": "^1.1.0",
    "apollo-link": "^1.0.0",
    "apollo-link-ws": "^1.0.0",
    "apollo-link-core": "^0.5.4",
    "apollo-link-context": "^1.0.0",
    "apollo-link-error": "^1.0.0",

but at startup of the Angular 2 application I get the following:

zone.js:392 Error: Unable to dynamically transpile ES module
   A loader plugin needs to be configured via `SystemJS.config({ transpiler: 'transpiler-module' })`.
  Instantiating http://localhost:3000/node_modules/apollo-angular/index.js
  Loading http://localhost:3000/app/app.module.js
  Loading app/main
    at transpile (instantiate.js:467)
    at instantiate.js:245
    at ZoneDelegate.invoke (zone.js:392)
    at Zone.run (zone.js:142)
    at zone.js:873
    at ZoneDelegate.invokeTask (zone.js:425)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at <anonymous>

It doesn't seem to matter if I set tsconfig.json to compile to ES6 (was ES5), and I've tried multiple Babel setups as well to no avail. My systemjs.config mappings look like:

        'apollo-angular': {main: 'index.js', defaultExtension: 'js'},
        'apollo-angular-link-http': {main: 'index.js', defaultExtension: 'js'},
        'apollo-client': {main: 'index.js', defaultExtension: 'js'},
        'apollo-link': {main: 'lib/index.js', defaultExtension: 'js'},
        'apollo-link-ws': {main: 'lib/webSocketLink.js', defaultExtension: 'js'},
        'apollo-link-core': {main: 'lib/index.js', defaultExtension: 'js'},
        'apollo-link-context': {main: 'lib/bundle.umd.js', defaultExtension: 'js'},
        'apollo-link-error': {main: 'lib/bundle.umd.js', defaultExtension: 'js'},
        'apollo-cache-inmemory': {main: 'lib/index.js', defaultExtension: 'js'},

Anyone have any ideas what I'm missing?

[kamilkisiela]

apollo-angular and apollo-angular-link-http have bundle.umd.js for such use case.

It looks like you points SystemJS to index.js which uses ESModules

[crumhorn]

Can't believe I missed that. Thanks!

Looks like I needed quite a few more dependencies on top of those, so if someone else comes along with the same issues, here's my systemjs config post-fix (packages are the same):

        'apollo-angular': {main: 'bundle.umd.js', defaultExtension: 'js'},
        'apollo-angular-link-http': {main: 'bundle.umd.js', defaultExtension: 'js'},
        'apollo-client': {main: 'apollo.umd.js', defaultExtension: 'js'},
        'apollo-link': {main: 'lib/bundle.umd.js', defaultExtension: 'js'},
        'apollo-link-dedup': {main: 'lib/bundle.umd.js', defaultExtension: 'js'},
        'apollo-link-ws': {main: 'lib/bundle.umd.js', defaultExtension: 'js'},
        'apollo-link-core': {main: 'lib/index.js', defaultExtension: 'js'},
        'apollo-link-context': {main: 'lib/bundle.umd.js', defaultExtension: 'js'},
        'apollo-link-error': {main: 'lib/bundle.umd.js', defaultExtension: 'js'},
        'apollo-cache': {main: 'lib/index.js', defaultExtension: 'js'},
        'apollo-cache/lib/types': {main: 'index.js', defaultExtension: 'js'},
        'apollo-cache-control': {main: 'lib/index.js', defaultExtension: 'js'},
        'apollo-cache-inmemory': {main: 'lib/index.js', defaultExtension: 'js'},
        'apollo-utilities': {main: 'lib/index.js', defaultExtension: 'js'},

        'zen-observable': {main:'index.js', defaultExtension:'js'},

I hate mappings like the 'apollo-cache/lib/types' one, but I guess it is what it is.

[kamilkisiela]

Thanks to apollographql/apollo-link#246 all Links will (when the new version is released) have lib/bundle.umd.js and lib/index.js for ES Modules. It would be easier to use them.

[kamilkisiela]

Also thanks to apollographql/apollo-client#2466 packages like apollo-cache, apollo-utilites and others would be super easy too.

[kamilkisiela]

@crumhorn Is there anything I can help you or should we close it?

[crumhorn]

@kamilkisiela all good, close it