Node.js SystemJS类型脚本类型冲突_Node.js_Angular_Typescript_Systemjs

Node.js SystemJS类型脚本类型冲突

node.js angular typescript

Node.js SystemJS类型脚本类型冲突,node.js,angular,typescript,systemjs,Node.js,Angular,Typescript,Systemjs,我目前正在研究Angular2，来自AngularJS背景。在这方面，我也在研究SystemJS和Typescript。然而，我在使用Typescript打字和SystemJS运行Angular2时遇到了一个问题。在没有任何键入的情况下使用Typescript可以正常工作，但当我尝试从Angular2键入加载任何模块时，SystemJS似乎无法解决此问题。据我所知，打字是随angular2.dev.js一起提供的，所以只要我导入它，我就可以了？这个错误与有些相似，但不幸的是他的解决方案

我目前正在研究Angular2，来自AngularJS背景。在这方面，我也在研究SystemJS和Typescript。

然而，我在使用Typescript打字和SystemJS运行Angular2时遇到了一个问题。在没有任何键入的情况下使用Typescript可以正常工作，但当我尝试从Angular2键入加载任何模块时，SystemJS似乎无法解决此问题。
据我所知，打字是随angular2.dev.js一起提供的，所以只要我导入它，我就可以了？

这个错误与有些相似，但不幸的是他的解决方案对我不起作用

不幸的是，我在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>

以及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，我发现启动的最佳设置是

关于项目设置/结构，您也可以参考我的回购协议

我的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>

根据我的说法，您必须以特定的方式设置index.html，我发现启动的最佳设置是

关于项目设置/结构，您也可以参考我的回购协议

我的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>

使用

从'angular2/platform/browser'导入{bootstrap}使用从'angular2/platform/browser'导入{bootstrap}非常感谢。虽然我无法解决我的问题，但我现在将使用此模板进行学习，一旦我对SystemJS和TypeScripts的一般工作流有了更深入的了解，我将再次创建自己的模板。感谢您提供的导入列表。我相信中列出的指令不需要导入（它们是自动导入的）。我想知道它们是否是唯一自动导入的指令。非常感谢。虽然我无法解决我的问题，但我现在将使用此模板进行学习，一旦我对SystemJS和TypeScripts的一般工作流有了更深入的了解，我将再次创建自己的模板。感谢您提供的导入列表。我相信中列出的指令不需要导入（它们是自动导入的）。我想知道它们是否是唯一自动导入的指令。
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'