2015-04-26 68 views
3

我在本地服務器上運行以下代碼。無法讀取未定義的屬性「拆分」

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://jspm.io/[email protected]"></script> 
    <script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script> 
</head> 
<body> 
    <my-app></my-app> 
    <script> 
    System.config({ 
     paths: { 
      '*': '*.js', 
      'angular2/*': 'angular2/*' 
     } 
}); 
System.import('main'); 
</script> 
</body> 
</html> 

以上是index.html頁面。

import {Component, View, bootstrap} from 'angular2/angular2'; 

@Component({ 
    selector: 'my-app' 
}) 
@View({ 
    template: '<h1>My first Angular 2 App</h1>' 
}) 
class AppComponent { 
} 

bootstrap(AppComponent); 

以上是main.js文件。

當我在服務器上運行這個時,我在控制檯中得到以下內容。

http://localhost:63342/es6/main.js:3:1: Unexpected token @ 
angular2.dev.js:752 TypeError: Error loading "main" at  http://localhost:63342/es6/main.js 
Cannot read property 'split' of undefined 
angular2.dev.js:753 TypeError: Error loading "main" at http://localhost:63342/es6/main.js 
Cannot read property 'split' of undefined 
    at Zone.longStackTraceZone.getLongStacktrace (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:728:35) 
    at Zone.longStackTraceZone.onError (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:753:19) 
    at Zone.run (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:92:14) 
    at zoneBoundFn (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:66:19) 
    at D (https://jspm.io/[email protected]:1:7439) 
    at I (https://jspm.io/[email protected]:1:7071) 
    at O.7.O.when (https://jspm.io/[email protected]:1:10745) 
    at w.7.w.run (https://jspm.io/[email protected]:1:9781) 
    at e.3.e._drain (https://jspm.io/[email protected]:1:1740) 
    at 3.e.drain (https://jspm.io/[email protected]:1:1394) 
--- Sun Apr 26 2015 08:27:39 GMT+0530 (IST) - 738ms ago 
Error 
    at Function.getStacktraceWithUncaughtError (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:699:32) 
    at Zone.longStackTraceZone.fork (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:758:43) 
    at Zone.bind (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:64:21) 
    at Function.Zone.bindArguments (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:195:22) 
    at t.fnNames.forEach.obj.(anonymous function) [as then] (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:186:42) 
    at k (https://jspm.io/[email protected]:1:21515) 
    at https://jspm.io/[email protected]:1:22664 
    at Zone.run (https://code.angularjs.org/2.0.0- alpha.19/angular2.dev.js:89:19) 
    at zoneBoundFn (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:66:19) 
    at D (https://jspm.io/[email protected]:1:7439) 
--- Sun Apr 26 2015 08:27:39 GMT+0530 (IST) - 739ms ago 
Error 
    at Function.getStacktraceWithUncaughtError (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:699:32) 
    at Zone.longStackTraceZone.fork (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:758:43) 
    at Zone.bind (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:64:21) 
    at Function.Zone.bindArguments (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:195:22) 
    at t.fnNames.forEach.obj.(anonymous function) [as then] (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:186:42) 
    at x.import (https://jspm.io/[email protected]:1:22539) 
    at x.$__global.upgradeSystemLoader.e.import (https://jspm.io/[email protected]:5:1180) 
    at http://localhost:63342/es6/index.html:17:18 
angular2.dev.js:752 TypeError: Cannot read property '__useDefault' of undefined 
angular2.dev.js:753 TypeError: Cannot read property '__useDefault' of undefined 
    at https://jspm.io/[email protected]:5:1220 
    at Zone.run (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:89:19) 
    at zoneBoundFn (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:66:19) 
    at D (https://jspm.io/[email protected]:1:7439) 
    at I (https://jspm.io/[email protected]:1:7071) 
    at O.7.O.when (https://jspm.io/[email protected]:1:10745) 
    at w.7.w.run (https://jspm.io/[email protected]:1:9781) 
    at e.3.e._drain (https://jspm.io/[email protected]:1:1740) 
    at 3.e.drain (https://jspm.io/[email protected]:1:1394) 
    at MutationObserver.t (https://jspm.io/[email protected]:1:3302) 
--- Sun Apr 26 2015 08:27:39 GMT+0530 (IST) - 742ms ago 
Error 
    at Function.getStacktraceWithUncaughtError (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:699:32) 
    at Zone.longStackTraceZone.fork (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:758:43) 
    at Zone.bind (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:64:21) 
    at Function.Zone.bindArguments (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:195:22) 
    at t.fnNames.forEach.obj.(anonymous function) [as then] (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:186:42) 
    at x.$__global.upgradeSystemLoader.e.import (https://jspm.io/[email protected]:5:1195) 
    at http://localhost:63342/es6/index.html:17:18 

上述代碼取自官方的角度2網站angular.io。如果在plunkr中執行相同的代碼,我會得到輸出「我的第一個Angular 2應用程序」,但不在我的本地。

我錯過了什麼嗎?

回答

3

似乎規定,我們必須導入traceur-runtime.js並設置traceur選項。

這裏是plunker link

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="style.css"> 
<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script> 
<script src="https://jspm.io/[email protected]"></script> 
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script> 
</head> 
<body> 
<my-app></my-app> 
<script> 
System.config({ 
    traceurOptions: { 
     annotations: true, 
     memberVariables: true, 
     types: true 
    }, 
    paths: { 
     '*': '*.js', 
     'angular2/*': 'angular2/*' 
    } 
}); 
System.import('main'); 
</script> 
</body> 
</html> 
2

問題出在您聲明角度應用的文件名。

它應該是的main.es6.js代替main.js

文件名稱格式應始終名字在System.import('main')這是main. + es6. + js

Read this article for better uderstanding

+0

我已經試圖改變文件名。您是否告訴我只需要更改文件名或System.import語句以及它。僅將文件名從main.js更改爲main.es6.js不起作用,則顯示相同的問題。 – Kaushik

+0

@Kaushik我只是說要更改應該解決您的問題的文件名 –

+1

@ pankajparkar不錯的鏈接,謝謝! ;) –

相關問題