Question

出现此错误：

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>

Answer 1

我认为我发现了问题：您在应用之后导入systemJs，因此，require()在第一次使用时不存在。要解决此问题，您可以在systemjs：

下移动app.js的导入

<!-- 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>

此外，您需要在systemJs配置中配置ng2-translate并删除脚本标记：

System.config({
    map: {
      'ng2-translate': 'node_modules/ng2-translate'
    },
});

Answer 2

发现问题：

应该是：

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

不是：

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

未捕获的ReferenceError：未定义require（匿名函数）@ ng2-translate.ts：2

2 个答案: