ng2-translate (404 not found) 我已经在 system.js 中添加了

Question

我已将 ng2-translate 安装到我的项目中，控制台错误一直显示 404 of the bundle 和 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' },
  };

Answer 1

我今天遇到了同样的问题

解决办法是这样的：

将'ng2-translate': 'node_modules/ng2-translate/bundles' 放入地图中的system.config.js 并将'ng2-translate' : { defaultExtension: 'js' } 放入包中

Answer 2

我必须像这样在systemjs 配置中映射它以使其工作：

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

Answer 3

安装 npm 模块：

npm install ng2-translate --save

像这样更新你的配置：

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

看看这是否有帮助。

Answer 4

可能通过这样做：

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

你指的是 index.js

但是您可能需要指向其他一些 .js 文件，例如

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

例如你可以这样做：

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
    }
});

Answer 5

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

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 文档中的supported module formats 列表。

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);

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