Search code examples
ecmascript-6systemjsangular-translatejspm

Importing angular-translate imports an empty object


I'm using JSPM 0.16.42 which uses SystemJS, I've tried both angular-translate and angular-route, both of which are on github endpoints.

However, for both of them angular throws the same error

argument module is not a function

when using them in ES6 syntax as follows:

import AngularRoute from 'angular-route';

angular.module('app', [AngularRoute]);

I'm using babel as a transpiler. The object I get back from the import seems to be empty. Following is the relevant part of my config.js file:

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },
  map: {
    "angular-route": "github:angular/[email protected]",
    "angular-translate": "github:angular-translate/[email protected]",
  }...

EDIT: When I tried to install angular-translate with an npm endpoint I got the error http://errors.angularjs.org/1.5.8/$injector/unpr?p0=e on the following line in angular.js

return new ErrorConstructor(message);

which I guess is a bit of progress but still doesn't solve my issue obviously

EDIT#2: I got angular-route to work with the help of @artem by using the npm endpoint, for some reason the github endpoint did not work so I used jspm install npm:angular-route. Further investigation is needed as to why the github package did not work and the npm package did

EDIT#3: I have overriden the package configuration as you can see below, though that didn't help

"npm:[email protected]": {
        "format": "global",
        "dependencies": {
          "angular": ">=1.2.26"
        },
        "shim": {
          "angular-translate": {
            "deps": "angular"
          }
        }
      }

Solution

  • I eventually fixed it by installing angular-translate as well as angular-route via their npm endpoints instead of the default (github) endpoints, using

    jspm install npm:angular-route

    &

    jspm install npm:angular-translate -o '{dependencies: { angular: ">=1.2.26" } }'

    The override for angular-translate was needed since jspm did not understand the original dependency syntax correctly which was angular: ">= 1.2.26 <=1.6" as described in this github issue