角2的ReferenceError:要求没有被定义(...),angular2-polyfills [英] Angular 2: ReferenceError: require is not defined(…), angular2-polyfills

查看:402
本文介绍了角2的ReferenceError:要求没有被定义(...),angular2-polyfills的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我还没有搞清楚究竟为什么它没有工作,但我从头开始,并得到了的工作版本。它似乎没有必要把 system.src.js 脚本标记,步伐下面的答案中的一个。同时看到工作版本和角2 教程

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.js before the angular script tags, pace one of the answers below. See both the working version and the Angular 2 tutorial.

我想学习角2和Ex preSS。我一般都遵循指南。我收到以下错误:

I am trying to learn Angular 2 and Express. I am generally following this guide. I am receiving the following error:

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

编辑:这里是破碎的​​版本在GitHub上的项目。

here is the broken version of the project on 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/ (...)

文件 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 文件都是pretty就像这样:

And the tsconfig.json files are both pretty much like this:

{
    "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
    }
}

感谢。

推荐答案

angular2-polyfills.js 是SystemJs捆绑,所以它需要SystemJs到已经安装。

The angular2-polyfills.js is a SystemJs bundle, so it needs SystemJs to have already been installed.

此消息要求是没有定义什么表示,由于要求是systemjs使用导入模块的功能。为了解决这个问题,移动 system.src.js 顶端并使其页的第一个脚本:

This what the message require is not defined means, because require is the function that systemjs uses to import modules. To fix this, move the system.src.js to the top and make it the first script of the page:

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

这篇关于角2的ReferenceError:要求没有被定义(...),angular2-polyfills的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆