2015-12-23 110 views
0

我目前正在從AngularJS背景來看Angular2的過程。在這個問題上,我也在研究SystemJS和Typescript。
 
但是,我有一個問題讓Angular2運行使用Typescript typings和SystemJS。使用Typescript沒有任何類型的按預期工作,但只要我嘗試從Angular2打字加載任何模塊,SystemJS似乎無法解決它。
從我讀過的,類型與angular2.dev.js一起發貨,所以只要我導入,我應該罰款?
 
該錯誤與https://github.com/systemjs/systemjs/issues/610有一些相似之處,但不幸的是他的解決方案並不適合我。SystemJS腳本打字衝突

不幸的是,我對SystemJS以及Typescript的體驗是空的,我只是試圖建立一個系統來學習。所有的庫都是最新的,並且剛安裝了npm。生成的版本由NodeJS express服務器託管,而Typescript文件及其類型不是。

我得到的錯誤是:

GET http://localhost:8000/angular2/angular2 404 (Not Found) 

這裏是我的 '的index.html' 頭提取物:

<head> 
    <script src="assets/js/lib/traceur.js"></script> 
    <script src="assets/js/lib/system.src.js"></script> 
    <script src="assets/js/lib/Rx.js"></script> 
    <script src="assets/js/lib/angular2.dev.js"></script> 

    <script> 
     System.config({ 
      packages: { 
       assets: { 
        format: 'register', 
        defaultExtension: 'js' 
       }, 
      } 
     }); 
     System.import('assets/js/boot') 
      .then(null, console.error.bind(console)); 
    </script> 
</head> 

 

的boot.ts Typescript-文件(我只添加了bootstrap(),這樣angular2實際上包含在編譯中):

import { bootstrap } from 'angular2/angular2'; 
bootstrap(); 
console.log('test'); 

和TSC編譯後生成的boot.js:

System.register(['angular2/angular2'], function(exports_1) { 
    var angular2_1; 
    return { 
     setters:[ 
      function (angular2_1_1) { 
       angular2_1 = angular2_1_1; 
      }], 
     execute: function() { 
      angular2_1.bootstrap(); 
      console.log('test'); 
     } 
    } 
}); 

//# sourceMappingURL=boot.js.map 

tsdconfig.json:

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": true, 
    "noImplicitAny": false 
    }, 
    "exclude": [ 
    "node_modules" 
    ] 
} 

任何幫助表示讚賞了很多,有自己的一些好的假期! :)

+1

使用'從'angular2/platform/browser'導入{bootstrap};' –

回答

4

根據我你必須設置你的index.html到特定的方式,我發現最好的啓動設置是https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html

你可以參考我的回購也爲項目設置/結構在這裏

https://github.com/MrPardeep/Angular2-DatePicker

我的index.html是

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <script> 
     System.config({ 
        defaultJSExtensions: true, 
        map: { 
         rxjs: 'node_modules/rxjs' 
        }, 
        packages: { 
         rxjs: { 
         defaultExtension: 'js' 
         } 
        } 
       }); 
    </script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/router.dev.js"></script> 
    <script src="node_modules/angular2/bundles/http.dev.js"></script> 

<script> 
    System.import('dist/bootstrap'); 
</script> 

進一步的詳細信息,我只是寫下來這份名單對於別人來說可能對某人有所幫助

import {Component, View, Directive, Input, Output, Inject, Injectable, provide} from 'angular2/core'; 

import {bootstrap} from 'angular2/platform/browser'; 

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf NgForm, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common'; 

import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router, LocationStrategy, HashLocationStrategy} from 'angular2/router'; 

import {Http, HTTP_PROVIDERS, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http' 
+0

非常感謝。雖然我無法解決問題,但我現在只是將此模板用於學習目的,並且一旦我對SystemJS和Typescript的一般工作流程有了更深入的瞭解,就可以重新創建自己的模板 –

+0

謝謝你的進口名單。我相信[CORE_DIRECTIVES](https://github.com/angular/angular/blob/2.0.0-beta.0/modules/angular2/src/common/directives/core_directives.ts)中列出的指令不會需要導入(它們會自動導入)。我想知道它們是否是唯一自動導入的。 –