SystemJS Typescript 输入冲突

Posted

技术标签:

【中文标题】SystemJS Typescript 输入冲突【英文标题】：SystemJS Typescript typing conflict 【发布时间】：2016-03-30 03:15:14 【问题描述】：

我目前正在研究 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"
  ]

非常感谢您的帮助，祝您假期愉快！ :)

【问题讨论】：

使用import bootstrap from 'angular2/platform/browser'; 【参考方案1】：

根据我的说法，您必须将 index.html 设置为特定的方式，我发现最好的启动设置是 https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html。

您也可以在此处参考我的 repo 以了解项目设置/结构

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'

【讨论】：

非常感谢。虽然我无法解决我的问题，但我现在只是将这个模板用于学习目的，一旦我对 SystemJS 和 Typescript 的一般工作流程有了更深入的了解，就会回到创建自己的模板 感谢进口清单。我相信CORE_DIRECTIVES中列出的指令不需要导入（它们是自动导入的。）我想知道它们是否是唯一自动导入的。

以上是关于SystemJS Typescript 输入冲突的主要内容，如果未能解决你的问题，请参考以下文章

我如何实际部署 Angular 2 + Typescript + systemjs 应用程序？

将 Angular 1.x 与 TypeScript 1.5 和 SystemJS 一起使用

[TypeScript] Using Lodash in TypeScript with Typings and SystemJS

Angular 1.x 与 TypeScript 2.x、@types 和 SystemJS - 使用全局类型

typescript 对于博客 - 使用systemjs将Phoenix javascript客户端包含在Angular 2应用程序中

如何使用 systemjs 在最小的 Angular 2 应用程序中加载 RxJS？