导入 angular-translate 导入一个空对象

Question

我正在使用 JSPM 0.16.42 which uses SystemJS, I've tried both angular-translate and angular-route，它们都在 github 端点上。

然而，对于他们两个 angular 抛出相同的错误

argument module is not a function

在 ES6 语法中使用它们时如下：

import AngularRoute from 'angular-route';

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

我正在使用 babel 作为转译器。我从导入中取回的对象似乎是空的。以下是我的 config.js 文件的相关部分：

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/bower-angular-route@1.5.8",
    "angular-translate": "github:angular-translate/bower-angular-translate@2.11.1",
  }...

编辑：当我尝试使用 npm 端点安装 angular-translate 时，我在 angular.js

的下一行收到错误

http://errors.angularjs.org/1.5.8/$injector/unpr?p0=e

return new ErrorConstructor(message);

我想这有点进步，但仍然没有明显解决我的问题

EDIT#2：我通过使用 npm 端点获得了 angular-route 在@artem 的帮助下工作，由于某种原因 github 端点不起作用所以我使用 jspm install npm:angular-route。需要进一步调查为什么 github 包不起作用而 npm 包起作用

编辑#3：我已经覆盖了包配置，如下所示，尽管这没有帮助

"npm:angular-translate@2.11.1": {
        "format": "global",
        "dependencies": {
          "angular": ">=1.2.26"
        },
        "shim": {
          "angular-translate": {
            "deps": "angular"
          }
        }
      }

Answer 1

这里是 angular-translate with systemjs:

的不那么小的、不真正独立的例子

npm install jspm
./node_modules/.bin/jspm install github:angular-translate/angular-translate

_{继续按，接受所有默认值}

创建文件test.js

import AngularTranslate from 'angular-translate/angular-translate';

console.log(AngularTranslate);

创建文件index.html

<!doctype html>
<html>
<head>
    <script src="jspm_packages/system.src.js"></script>

    <script src="config.js"></script>
    <script>
        System.import('./test.js');
    </script>

</head>
<body>
</body>
</html>

在浏览器中打开：

Failed to load resource: the server responded with a status of 404 (File not found)
undefined:1 Uncaught (in promise) Error: (SystemJS) XHR error (404 File not found) loading 
http://localhost:8035/jspm_packages/github/angular-translate/angular-translate@2.11.1.js(…)

为什么那个文件不存在？它应该是由 jspm 创建的，如果你从 npm 安装了 angular-translate 它将包含

module.exports = require("npm:angular-translate@2.11.1/dist/angular-translate.js");

这只是从符号包名称（该 .js 文件的名称）到该包主文件的重定向，如 package.json:

中指定

"main": "dist/angular-translate.js",

但是angular-翻译来自github，那里没有dist。这就是 jspm 没有创建重定向文件的原因 - 没有可重定向到的内容。

没问题，只需从我们从 github:

获得的源代码构建它

cd jspm_packages/github/angular-translate/angular-translate@2.11.1/
npm install
npm run-script build
cd ../../../..

并修复 config.js 中的映射：

  map: {
      "angular-translate/angular-translate": "github:angular-translate/angular-translate@2.11.1/dist/angular-translate",

再次在浏览器中打开index.html：

system.src.js:122 Uncaught (in promise) Error: (SystemJS) angular is not defined(…)

没问题，angular 已经安装为 angular-translate 依赖项，只需告诉 systemjs 何时以及如何加载它即可。

添加到config.js:

  meta: {
    "angular-translate/angular-translate": {
        "deps": ["angular"]
      }
  },


  map: {
    "angular": "github:angular-translate/angular-translate@2.11.1/node_modules/angular/angular",

注意：您不需要为 angular-translate 指定 format。 SystemJS 自动正确检测它——它可以作为 'amd' 或 'cjs' 加载，但它不会作为 'global' 工作。另外，您可能没有从安装 angular-translate 开始，所以您已经在某处安装了 angular.js 文件和映射。

再次在浏览器中打开index.html。它在控制台打印：

pascalprecht.translate

是 angular-translate 导出一个字符串 - 似乎是 angular1 模块的典型。

我没有angular.js的经验，所以我宣布它成功并到此为止。

PS 为什么 angular-route 在你从 npm 安装时有效，而在 github 中无效？

从 npm 安装时，jspm 创建了一个名为 jspm_packages/npm/angular-route@1.5.8.js 的文件，其中包含

module.exports = require("npm:angular-route@1.5.8/index.js");

因为 package.json 对于 angular-route

  "main": "index.js",

这是正确的，适合你。

从 github 安装时，jspm 创建了类似的文件 jspm_packages/github/angular/bower-angular-route@1.5.8.js，但这次它指向不同的文件

module.exports = require("github:angular/bower-angular-route@1.5.8/angular-route");

因为有人在 https://github.com/jspm/registry/blob/master/package-overrides/github/angular/bower-angular-route%401.3.0.json

的 jspm 注册表中设置了覆盖

因为 bower.json 用于 bower-angular-route

"main": "./angular-route.js",

也许这是一个疏忽，也许它是正确的并且对他们有用 - 我不知道。

TL;DR如果软件未针对该包管理器正确打包，则使用包管理器安装软件不是一个好主意。

Answer 2

我最终通过安装 angular-translate 以及 angular-route 通过他们的 npm 端点而不是默认的 (github) 端点来修复它，使用

jspm install npm:angular-route

&

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

需要覆盖 angular-translate，因为 jspm 无法正确理解原始依赖语法，即 angular: ">= 1.2.26 <=1.6"，如 github issue

中所述

导入 angular-translate 导入一个空对象

Importing angular-translate imports an empty object

ecmascript-6

angular-translate

systemjs

jspm