Javascript 未捕获引用错误：未定义require（匿名函数）@ng2 translate.ts:2_Javascript_Import_Typescript_Angular_Require

Javascript 未捕获引用错误：未定义require（匿名函数）@ng2 translate.ts:2

javascript import typescript angular

Javascript 未捕获引用错误：未定义require（匿名函数）@ng2 translate.ts:2,javascript,import,typescript,angular,require,Javascript,Import,Typescript,Angular,Require,获取此错误： Uncaught ReferenceError: require is not defined(anonymous function) @ ng2-translate.ts:2 这是我导入@anguar/http的行 import {provide} from '@angular/core'; import {Http} from '@angular/http'; 我不确定为什么会在这里出现任何错误，因为我确实在项目中包含了http依赖项： package.json： "d

获取此错误：

Uncaught ReferenceError: require is not defined(anonymous function) @ ng2-translate.ts:2

这是我导入@anguar/http的行

import {provide} from '@angular/core';
import {Http} from '@angular/http';

我不确定为什么会在这里出现任何错误，因为我确实在项目中包含了http依赖项：

package.json：

  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/http": "^2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "core-js": "^2.4.0",
    "es5-shim": "^4.5.9",
    "es6-shim": "^0.35.1",
    "ng2-translate": "2.2.2",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "^0.19.31",
    "zone.js": "^0.6.12"
  },

index.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Focus Anbud</title>
  <base href='/'> {{content-for 'head'}}
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Loading Spinner -->
  <link rel="stylesheet" href="assets/css/whirly.css">

  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/font-awesome.min.css">
  <link rel="stylesheet" href="assets/css/ionicons.min.css">

  <!-- Theme -->
  <link rel="stylesheet" href="assets/css/AdminLTE.min.css">
  <link rel="stylesheet" href="assets/css/skins/skin-blue.min.css">
  <link rel="stylesheet" href="assets/css/flag-icon.min.css">

</head>

<body class="hold-transition skin-blue sidebar-mini">
  <!--<div class="wrapper">-->
  <app>
    <div class="whirly-loader" style="margin-left: 50%; margin-top:20%">Loading...</div>
  </app>
  <!--</div>-->
  <!-- ./wrapper -->

  <!-- jQuery 2.1.4 -->
  <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>

  <!-- Bootstrap 3.3.6 -->
  <script src="assets/js/bootstrap.min.js"></script>

  <!-- AdminLTE App -->
  <script src="assets/js/app.js"></script>

  <!-- polyfills for older browsers -->
  <script src="vendor/core-js/client/shim.min.js"></script>

  <!-- default -->
  <script src="vendor/zone.js/dist/zone.min.js"></script>
  <script src="vendor/reflect-metadata/Reflect.js"></script>
  <script src="vendor/systemjs/dist/system.src.js"></script>
  <script src="vendor/ng2-translate/ng2-translate.js"></script>

  <script>
  System.baseURL = '.';
    System.import('system-config.js').then(function() {
      System.import('main');
    }).catch(console.error.bind(console));
  </script>
</body>

</html>


聚焦安巴德
{{head'的内容}
加载。。。
System.baseURL='；
import（'System-config.js'）。然后（function（）{
系统导入（'main'）；
}).catch（console.error.bind（console））；

我想我发现了问题：在应用程序之后导入systemJs，因此，

require（）

在第一次使用时不存在。要解决此问题，您可以将app.js的导入移动到systemjs下：

<!-- default -->
<script src="vendor/zone.js/dist/zone.min.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>

<!-- AdminLTE App -->
<script src="assets/js/app.js"></script>

发现问题：

应该是：

  <script src="vendor/ng2-translate/bundles/ng2-translate.js"></script>

不是：

您在脚本标记中添加了systemJS吗？@Dinistro，它不在带有脚本标记的索引文件中，是吗？添加了my index.html以便您可以查看。不幸的是，没有造成任何差异，并且是ng2-translate.js文件给出了错误，而不是应用程序。js@ganjan您是否编译到

CommonJS

（可以在tsconfig.json文件中找到）？

  <script src="vendor/ng2-translate/bundles/ng2-translate.js"></script>

  <script src="vendor/ng2-translate/ng2-translate.js"></script>