2016-02-26 80 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; 
相關問題