Question

我已经将ng2-translate安装到我的项目和控制台错误，并继续显示404的捆绑和xhr错误。我已将ng2-translate添加到我的system.config.js中，该系统附带标准的angular2快速入门，但仍显示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 not found）问题。这是一个适合我的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

你需要在你的应用程序中使用en.json（默认设置）或从构造函数调用的任何文件中有一个i18n文件夹，如下所示：

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

ng2-translate（404 not found）我已经在system.js中添加了它

7 个答案: