【问题标题】：Angular 2: ReferenceError: require is not defined(…), angular2-polyfillsAngular 2：ReferenceError：需要未定义（...），angular2-polyfills
【发布时间】：2016-02-26 15:21:05
【问题描述】：

编辑：

我还没有弄清楚它为什么不起作用，但我从头开始并得到了working version。似乎没有必要将system.src.js 放在angular 脚本标签之前，pace 以下答案之一。查看工作版本和 Angular 2 tutorial。

原问题：

我正在尝试学习 Angular 2 和 Express。我通常遵循this 指南。我收到以下错误：

ReferenceError: require is not defined(…) angular2-polyfills.js:1243 
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468
lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480
lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451
lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:401
(anonymous function) @ angular2-polyfills.js:123
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$asap$$flush @ angular2-polyfills.js:262

编辑：here 是 GitHub 上项目的损坏版本。

我的项目结构如下：

application
|__client
   |__app
      |__main.ts
      |__main.js
      |__tsconfig.json
   |__typings/ (...)
   |__index.html
   |__typings.json
|__server
   |__server.ts
   |__server.js
   |__tsconfig.json
   |__typings.json
|__node_modules/ (...)

文件server.ts是这样的：

import * as express from "express";
let path = require("path");

let app = express();

let PORT = 8080;

app.use("/node_modules", express.static(__dirname + "/../node_modules"));
app.use("/app", express.static(__dirname + "/../client/app"));

app.get("/", (req, res) => {
  res.sendFile(path.resolve(__dirname, "..", "client", "index.html"));
});

app.listen(PORT, () => { console.log("Listening on port " + PORT)});

main.ts 文件是这样的：

import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";

@Component({
  selector: "app",
  template: "<h1>Hello world</h1>"
})
export class AppComponent {}

bootstrap(AppComponent);

index.html 文件是这样的：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>

  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <!-- <script src="node_modules/systemjs/dist/system.src.js"></script> --> 
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
  <script>
    System.config({
      packages: {
        app: {
          format: "register",
          defaultExtension: "js"
        }
      }
    });
    System.import("app/main")
      .then(null, console.error.bind(console));
  </script>
</head>

<body>
  <app></app>
</body>

</html>

tsconfig.json 文件都差不多是这样的：

{
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "isolatedModules": false,
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "declaration": false,
        "noImplicitAny": true,
        "removeComments": false,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true
    },
    "exclude": [
        "node_modules",
        "typings/browser",
        "typings/browser.d.ts"
    ],
    "compileOnSave": true,
    "buildOnSave": false,
    "atom": {
        "rewriteTsconfig": false
    }
}

谢谢。

【问题讨论】：

看起来像 stackoverflow.com/questions/34730010/… 或 stackoverflow.com/questions/34874490/… 的副本
嗯。我已经看到了这些，但是将路径更改为../app.component.js 不起作用，就像在第一个链接中一样，我的index.html 文件中已经有system.src.js。所以我不确定这些是否有效，除非我误解了答案。

标签： typescript angular

【解决方案1】：

angular2-polyfills.js 是一个 SystemJs 包，所以它需要 SystemJs 已经安装。

这就是消息require is not defined 的意思，因为require 是systemjs 用来导入模块的函数。要解决此问题，请将system.src.js 移动到顶部并将其设为页面的第一个脚本：

<script src="node_modules/systemjs/dist/system.src.js"></script>
... other script tags

【讨论】：

这不会改变我的任何地方...同样的错误

【解决方案2】：

我今天刚开始使用 angular 4（从 angular2 升级）。

就在我的可注射身份验证课程之前，我添加了这个：

// declare var Auth0Lock: any;
declare let require: any;
let Auth0Lock = require('auth0-lock').default;

【讨论】：