typescript Angular 2: ReferenceError: require is not defined(...), angular2-polyfills
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35655442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2: ReferenceError: require is not defined(…), angular2-polyfills
提问by Ethan Kent
Edit:
编辑：
I haven't figure out exactly why it didn't work, but I started from scratch and got a working version. It does not appear necessary to put system.src.jsbefore the angularscript tags, paceone of the answers below. See both the working version and the Angular 2 tutorial.
我还没有弄清楚为什么它不起作用，但我从头开始并得到了一个工作版本。它似乎没有必要把system.src.js对前angular脚本标记，步伐下面的答案之一。请参阅工作版本和 Angular 2教程。
Original question:
原问题：
I am trying to learn Angular 2 and Express. I am generally following thisguide. I am receiving the following error:
我正在尝试学习 Angular 2 和 Express。我通常遵循本指南。我收到以下错误：
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
Edit: hereis the broken version of the project on GitHub.
编辑：这是 GitHub 上项目的损坏版本。
My project is structured like so:
我的项目结构如下：
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/ (...)
The file server.tsis like this:
该文件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)});
The main.tsfile is like this:
该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);
The index.htmlfile is like this:
该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>
And the tsconfig.jsonfiles are both pretty much like this:
这些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
}
}
Thanks.
谢谢。
回答by Angular University
The angular2-polyfills.jsis a SystemJs bundle, so it needs SystemJs to have already been installed.
这angular2-polyfills.js是一个 SystemJs 包，所以它需要已经安装了 SystemJs。
This what the message require is not definedmeans, because require is the function that systemjs uses to import modules. To fix this, move the system.src.jsto the top and make it the first script of the page:
这就是消息的require is not defined意思，因为 require 是 systemjs 用来导入模块的函数。要解决此问题，请将 移至system.src.js顶部并使其成为页面的第一个脚本：
<script src="node_modules/systemjs/dist/system.src.js"></script>
... other script tags
回答by stack user
I just started with angular 4 today (upgraded from angular2).
我今天刚开始使用 angular 4（从 angular2 升级）。
Just before my injectable auth class, I added this:
就在我的可注入身份验证类之前，我添加了以下内容：
// declare var Auth0Lock: any;
declare let require: any;
let Auth0Lock = require('auth0-lock').default;
