ng2-translate（404未找到）已添加到system.js中。

Question

我已经将ng2-translate安装到我的项目中，但控制台错误一直显示bundle的404和xhr错误。我已经将ng2-translate添加到标准angular2快速启动程序附带的system.config.js中，但仍然显示404和xhr错误。

它要么给我404错误，要么是未定义错误的注释:/。

Github: 关于使用systemconfig.js的问题的讨论线程。

https://github.com/ocombe/ng2-translate/issues/167

var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'ng2-translate':              'node_modules/ng2-translate',
    'rxjs':                       'node_modules/rxjs'
  };

编辑：

var packages = {
    'ng2-translate':              { main: 'ng2-translate.js', defaultExtension: 'js' },
  };

- nCore

---

你找到任何解决方案了吗？ - gsiradze

Answer 1

今天我也遇到了同样的问题。

解决方法如下：

将'ng2-translate': 'node_modules/ng2-translate/bundles'添加到system.config.js的map中，将'ng2-translate' : { defaultExtension: 'js' }添加到packages中。

- gsiradze

Answer 2

我必须按照以下方式在systemjs配置中进行映射以使其正常工作：

'ng2-translate': 'npm:ng2-translate/bundles/ng2-translate.umd.js'

- Duy Nguyen

Answer 3

安装npm模块：

npm install ng2-translate --save

update your config like this:

System.config({
    packages: {
        "ng2-translate": {main: 'ng2-translate.js', "defaultExtension": "js"}
    },
    map: {
        'ng2-translate': 'node_modules/ng2-translate'
    }
});

在 .ts 文件中使用 ng2-translate 的方法如下 -

import {TranslateService, TranslatePipe} from 'ng2-translate';

看看这是否有帮助。

- Sanket

---

我已经将该软件包安装到我的项目中，system.config基本上就是Angular2安装指南中的内容。 - nCore

Answer 4

Probably by doing:

 'ng2-translate':              'node_modules/ng2-translate',

您正在引用index.js文件。

然而，您可能需要指向其他的.js文件，例如：

 'ng2-translate':              'node_modules/ng2-translate/somefile.js',

for example you can do:

System.config({
    //... some other stuff
      map: {
        'ng2-translate': 'node_modules/ng2-translate/ng2-translate.js',
    },
    packages: {          
        //... some other stuff, do not put your ng2-translate here
    }
});

- asdf_enel_hak

---

我也试过了，但是它给了我一个有关未定义注释的错误，请查看我在原始帖子中的编辑。如果我这样做，它看起来像这样：“http://localhost:3000/node_modules/ng2-translate.js/ng2-translate 404 (未找到)”。 - nCore

@asd_enel_hak 如果你查看我原始帖子的编辑，我已经包含了相当不错的.js扩展名。我得到了“无法读取未定义的属性'注释'” - nCore

我很困惑，把那放在哪里？ - nCore

我之前是在开玩笑用 while 循环 :) 我本意是想说要一直尝试组合，直到成功为止。例如：不要使用 var packages = {'ng2-translate': { main: 'ng2-translate.js', defaultExtension: 'js' }, }; - asdf_enel_hak

请查看我在您的帖子上的第一条评论。其结果是 - “localhost:3000/node_modules/ng2-translate.js/ng2-translate”。 - nCore

Answer 5

ng2-translate使用CommonJS模块格式，如其tsconfig.json中配置的那样：

compilerOptions": {
    ...
    "module": "commonjs",
    "target": "es5",
     ...
}

我通过在 SystemJS 配置的 packages 部分明确指定此格式，成功添加了 ng2-translate。

System.config({
    map: {
        'ng2-translate': 'node_modules/ng2-translate'
         // ... more mappings
    },
    packages: {          
        'ng2-bootstrap': {
             defaultExtension: 'js',
             format: 'cjs'
        }
        // ... more package definitions
    }
});

请参考SystemJS文档中支持的模块格式列表，获取更多详细信息。

- spike

Answer 6

如果你和我一样，花费了数小时来解决ng2-translate（404未找到）问题。这里是一个对我有效的systemjs.config.js。感谢Sam Verschueren @github提供。

(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'
    };

    var paths = {
        'underscore':                 'node_modules/underscore/underscore.js',
        'ng2-translate':              'node_modules/ng2-translate/bundles/ng2-translate.umd.js'
    };
    // 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' },
        'ng2-translate':              { defaultExtension: 'js' }
    };
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages,
        paths: paths
    };
    System.config(config);
})(this);

- Roddy Dairion

Answer 7

你需要在你的应用程序中有一个名为i18n的文件夹，其中包含en.json（这是默认设置）或者你从构造函数中调用的任何其他文件，看起来像这样：

constructor(translate: TranslateService) {
    // this language will be used as a fallback when a translation isn't found in the current language
    translate.setDefaultLang('en');

     // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use('en');
}

- Yan.F