2016-02-26 41 views
4

编辑:

我还没弄清楚到底为什么没有工作,但我从无到有,得到了working version。似乎没有必要在angular脚本标记之前放system.src.js步速下面的答案之一。查看工作版本和Angular 2 tutorial角2:的ReferenceError:要求没有定义(...),angular2-polyfills


原题:

我努力学习角2和快递。我一般遵循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 
    } 
} 

感谢。

+0

貌似http://stackoverflow.com/questions/34730010/angular2-5-minute-install-bug-require-的DUP is-not-defined或者http://stackoverflow.com/questions/34874490/uncaught-referenceerror-require-is-not-defined-in-angular2 –

+1

嗯。我已经看到了这些,但改变路径到'../ app.component.js'不起作用,就像在第一个链接中一样,并且我的'index.html'文件中已经有'system.src.js'。所以我不确定这些工作,除非我误解了答案。 –

回答

6

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 
+0

这不会改变我的地方......同样的错误 – messerbill

0

我刚开始用角4今日(从angular2升级)。

只是我注射AUTH上课前,我加了这一点:

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