Angular2使用打字稿環境分開文件

我需要爲php + mysql項目創建一個Angular2 + TypeScript前端。當我使用npm（jspm，tsd，webpack或gulp）或者鏈接到code.angularjs.org時，一切正常。但是，當我試圖只使用一些Angular2本地文件，然後systemjs將打破一切通過它的組件註冊和扔給我一個這樣的例外：Angular2使用打字稿環境分開文件

Uncaught SyntaxError: Unexpected token <

也有在文檔中的一些困惑如何用腳本和組件/視圖實現index.html。在深的文檔中，我發現一個例子幾乎爲我工作：

<!DOCTYPE html> 
<html> 
<head> 
    <title>angular2 playground</title> 
    <link rel="stylesheet" href="style.css"> 
    <script src="tools/traceur-runtime.js"></script> 
    <script src="tools/system.js"></script> 
    <script src="tools/typescript.js"></script> 
    <script src="config.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script> 
    <script> 
    System.import('app') 
     .catch(console.error.bind(console)); 
    </script> 
</head> 
<body> 
    <my-app> 
    loading... 
    </my-app> 
</body> 
</html>

但是當我更換到angular2.min.js當地版本我收到上述錯誤。

有誰知道如何解決它？

更新

感謝Chako answer我做了這樣的設置，它是爲我工作：

<script type="text/javascript" src="./libs/es6-shim.min.js"></script> 
<script type="text/javascript" src="./libs/system-polyfills.js"></script> 
<script type="text/javascript" src="./libs/system.src.js"></script> 
<script type="text/javascript" src="./libs/Rx.min.js"></script> 
<script type="text/javascript" src="./libs/angular/angular2-polyfills.js"></script> 
<script type="text/javascript" src="./libs/angular/angular2.dev.js"></script> 
<script type="text/javascript" src="./libs/angular/router.dev.js"></script> 
<script type="text/javascript" src="./libs/angular/http.dev.js"></script> 
<script> 
System.config({ 
    packages: { 
     app: { 
      format: 'register', 
      defaultExtension: 'js' 
     } 
    } 
}); 
System.import('app/main').then(null, console.error.bind(console)); 
</script>

我也試着更新到beta 8，它是破碎找到文件，以便我將beta 6作爲穩定版本。

而且某些時刻：

*.min.js版本不能正常工作。
新Rx.min.js從beta 8被拋向我，DI（依賴注入）的異常。
tsc不被微軟支持更多的，它是從watch拋出編譯錯誤，然後退出。所以我安裝了ntsc，它工作更快，但在控制檯中寫入了更多的TypeScript錯誤。

來源

2016-02-13 Mike

請您用下面的代碼試試？用npm下載所有需要的js。

<script src="node_modules/es6-shim/es6-shim.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.js"></script> 
    <script src="node_modules/typescript/lib/typescript.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
    <script src="node_modules/angular2/bundles/http.dev.js"></script> 
    <script src="node_modules/angular2/bundles/router.dev.js"></script> 
    <script> 
     System.config({ 
     transpiler: 'typescript', 
     typescriptOptions: { emitDecoratorMetadata: true }, 
     packages: {'app': {defaultExtension: 'ts'}} 
     }); 
     System.import('app/boot') 
      .then(null, console.error.bind(console)); 
    </script>

你可以找到在package.json下面的代碼你需要的依賴。

{ 
    "name": "angular2-material-menu", 
    "version": "1.0.0", 
    "scripts": { 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "lite": "lite-server", 
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" " 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "angular2": "2.0.0-beta.0", 
    "systemjs": "0.19.6", 
    "es6-promise": "^3.0.2", 
    "es6-shim": "^0.33.3", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.0", 
    "zone.js": "0.5.10" 
    }, 
    "devDependencies": { 
    "bootstrap": "^3.3.6", 
    "concurrently": "^1.0.0", 
    "lite-server": "^1.3.1", 
    "ng2-material": "^0.2.1", 
    "typescript": "^1.7.3" 
    } 
}

這對我有用。

這boot.ts：

import {bootstrap} from 'angular2/platform/browser' 
import {HTTP_PROVIDERS, Http} from 'angular2/http'; 
import {ROUTER_PROVIDERS} from 'angular2/router'; 
import {HttpService} from 'app/component/http/http.service'; 

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS, HttpService]).then(app => { 
     console.log('Bootstrap Successful'); 
    }, err => { 
     console.error(err); 
    });

來源

2016-02-13 19:05:12 Valay

謝謝沙科您的快速答覆。我也已經嘗試過這個解決方案。你能給我提供你的'boot.ts'的代碼嗎？ – Mike

@ Mike-接着說：boot.ts'。 – Valay

你用什麼版本（咕嘟咕嘟的WebPack等）？ – Mike

Angular2使用打字稿環境分開文件

回答

相關問題