簡體   English   中英

SystemJS Typescript鍵入沖突

[英]SystemJS Typescript typing conflict

我目前正在研究Angular2,它來自AngularJS背景。 在這方面,我也正在研究SystemJS和Typescript。

但是,使用Typescript類型化和SystemJS使Angular2運行時遇到了問題。 使用沒有任何類型的Typescript可以按預期工作,但是一旦我嘗試從Angular2類型中加載任何模塊,SystemJS似乎無法解決它。
從我讀過的內容來看,angular2.dev.js附帶有類型,所以只要導入,就可以了嗎?

該錯誤與https://github.com/systemjs/systemjs/issues/610相似,但是不幸的是,他的解決方案對我不起作用。

不幸的是,我在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"
  ]
}

任何幫助表示感謝,祝您假期愉快! :)

據我說,您必須以特殊的方式設置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'

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM