導入angular-translate導入空對象

我使用的是JSPM 0.16.42它使用SystemJS，我試過angular-translate和angular-route，它們都在github端點上。導入angular-translate導入空對象

然而，對於兩者的角度引發相同的錯誤

argument module is not a function

在ES6語法使用它們時，按如下

：

import AngularRoute from 'angular-route'; 

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

我使用babel作爲transpiler。我從導入中得到的對象似乎是空的。以下是我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/[email protected]", 
    "angular-translate": "github:angular-translate/[email protected]", 
    }...

編輯：當我試圖與NPM端點我在01

return new ErrorConstructor(message);

得到了錯誤http://errors.angularjs.org/1.5.8/$injector/unpr?p0=e 以下行安裝angular-translate這我猜是有點進步，但仍然沒有明顯解決我的問題

編輯＃2：我得到了角度路線，在@ar的幫助下工作通過使用npm端點，出於某種原因github端點不起作用，所以我使用了jspm install npm:angular-route。進一步的調查需要，爲什麼GitHub的包沒有工作，故宮包做

編輯＃3：我已經重寫了程序包配置，你可以在下面看到，儘管這並沒有幫助

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

來源

2016-08-23 Robin-Hoodie

嘗試將您的導入更改爲：import * as'angular-route'中的AngularRoute – artem

您好，該語法只是從'angular-route'導入所有內容，這也給我一個空對象 –

該index.js有'module.exports ='ngRoute';'照原樣，它會導出一個字符串文字'ngRoute'。我不確定SystemJS能夠處理這個問題。以commonJS格式重新導出的正常方式是 'module.exports = require（'./ angular-route'）;' – artem

我最終固定它通過經由他們的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

來源

2016-08-24 08:46:03

與systemjs

這裏是不那麼微乎其微，不，真的 - 自足例如，對於角翻譯：

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

_{持續按壓<ENTER>，接受所有默認值}

創建文件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/[email protected](…)

爲什麼該文件不存在？它應該由JSPM創建，如果你已經安裝了angular-translate從NPM它會包含

module.exports = require("npm:[email protected]/dist/angular-translate.js");

這僅僅是一個從象徵性的包名重定向（那名.js文件），該程序包的主文件，如在指定的package.json：

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

但角翻譯是從GitHub，沒有dist那裏。這就是爲什麼jspm沒有創建重定向文件 - 沒有什麼可以重定向到。再次

map: { 
     "angular-translate/angular-translate": "github:angular-translate/[email protected]/dist/angular-translate",

打開瀏覽器index.html：

沒問題，只是從我們從GitHub獲得源構建它：

cd jspm_packages/github/angular-translate/[email protected]/ 
npm install 
npm run-script build 
cd ../../../..

和config.js修復映射

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

沒問題，角度已經作爲角度轉換已安裝只需告訴systemjs何時以及如何加載它。

添加到config.js：

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


    map: { 
    "angular": "github:angular-translate/[email protected]/node_modules/angular/angular",

注意：您不需要指定format對角翻譯。 SystemJS能夠自動檢測到它 - 它可以被加載爲'amd'或'cjs'，但它不會像'global'那樣工作。另外，你可能並沒有開始安裝angular-translate，所以你已經有了angular.js文件和映射到某處。

再次在瀏覽器中打開index.html。它打印在控制檯：

pascalprecht.translate

是角轉換出口字符串 - 似乎是典型的angular1模塊。

我沒有angular.js的經驗，所以我宣佈它成功並停在這裏。

PS爲什麼角度路由工作，當你從npm安裝它，並沒有從github工作？

當從NPM安裝，熱蒙公司創建了一個名爲jspm_packages/npm/[email protected]文件，其中包含

module.exports = require("npm:[email protected]/index.js");

，因爲對的package.json角路由具有

"main": "index.js",

這是正確的，你的作品。

當從GitHub安裝，熱蒙公司建立了類似的文件jspm_packages/github/angular/[email protected]，但這次它指向一個不同的文件

module.exports = require("github:angular/[email protected]/angular-route");

，因爲有人把在JSPM註冊表中有一個覆蓋在https://github.com/jspm/registry/blob/master/package-overrides/github/angular/bower-angular-route%401.3.0.json

因爲bower.json對於涼亭角路線有

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

也許這是一個疏忽，也許它是正確的，併爲他們工作 - 我不知道不知道。

TL; DR如果包管理器沒有正確打包軟件，那麼使用軟件包管理器來安裝軟件並不是一個好主意。

來源

2016-08-24 06:13:11 artem

「You don '不需要指定角度轉換的格式，SystemJS自動檢測它是否正確 - 它是'amd'，而不是'global'「現在我感到困惑，在'angular-translate.js'文件的頂部讀取' 「format cjs」' –

從源碼構建的那個沒有那個字符串。它以樣板函數開始，允許以amd和cjs的形式加載它。我更新了答案。 – artem

導入angular-translate導入空對象

回答

相關問題