使用tsconfig.json的Visual Studio 2015，Typescript和angular2

Question

我一直在试用最新版本的Angular2（2.0.0-alpha.44）和Visual Studio 2015.以下是我使用过的与此问题相关的所有版本：

• Visual Studio 2015
• Asp.NET 5
• Typescript 1.6
• Resharper 10
• Angular 2.0.0-alpha.44

这是我的解决方案：

我的所有打字稿都在/ Ts目录中，该目录还有一个 tsconfig.json 文件。这使Visual Studio显示了一个打字的虚拟项目＆＃39;

只要将import {Component, bootstrap} from "angular2/angular2";行放入 main.ts ，它就会在我的node_modules目录中找到angular2库文件并显示这些文件（不确定是什么）平坦的目录结构尽管如此）

此时，typescript编译器将编译该单个文件（main.ts）。但是，它不再编译该文件夹中的任何其他.ts文件（它在将angular2引入之前），并且它不会将输出放在我指定的outFile位置 tsconfig.json

Resharper表示在找到Component和bootstrap引用时遇到问题，但工具提示似乎也明白了这些引用的签名是什么。不确定两者是如何成真的。

如果我从等式中删除了angular2，打字稿很高兴地跟随我的tsconfig.json中的所有设置，将所有.ts文件编译成 app.js 并将其放入../wwwroot/js/app.js < / p>

有没有人成功地让VS2015，打字稿和angular2一起玩得很好？

Answer 1

来自TypeScript Handbook:

  

在TypeScript中，就像在ECMAScript 2015中一样，任何包含   顶级导入或导出被视为一个模块。

和

  

就像JS文件和JS文件之间存在一对一的对应关系一样   模块，TypeScript在模块之间具有一对一的对应关系   源文件及其发出的JS文件。这样做的一个结果是   它不可能使用--outFile编译器开关来连接   将多个模块源文件合并为一个JavaScript文件。

我相信这是你在“从等式中移除angular2”时输出的原因。模块和outFile不兼容。请改用outDir。

另外，我试图将tsconfig文件放在子文件夹中，但Visual Studio不尊重它，所以我将它移回项目根目录。

Answer 2

我已经尝试了几个星期了。似乎d.ts文件仍然不正确。如果您注意到，定义文件仍在alpha 38或39.

即使定义文件不是在alpha 38或39上，并且是从正确版本创建的，我仍然认为你不能让它工作，因为它不是形状或形式固化，它仍然缺少一堆我相信的东西。

你得到的错误我还没有看到，我不使用resharper（虽然我不认为这应该真的导致你的问题）。我能说的是，我确实在alpha 26中取得了成功，在这里找到了：

https://github.com/microsoft/ngconf2015demo

它可能不会帮助你，因为它是一个早期的alpha版本。

此外，在较新的alpha中，他们已经开始创建UpdateAdapter，可以在这里找到一个示例：

http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html

这是一个非常重要的组成部分，因为每个尝试早期采用的人都想在angular2中使用angular1指令。

我也无法使用它（即使这是一个超级新的alpha版本）。定义文件仍然只有39，并且它们之间存在一些差异。即使我按原样导入他的整个项目，也有很多缺少的引用和导出。除此之外，尝试并修改d.ts文件以消除构建错误，可以做的事情并不多。

此外，模块系统应该设置为AMD我相信。这将帮助您更接近于击败编译时错误。另外，在visual studio中，你需要将标准设置为es5我相信为了让angular2在此刻运行（但我不确定，这只是我用来运行alpha 26示例的步骤）。

我仍然每天都在尝试工作，所以如果我能够让它运行起来（我不认为我能够在没有潜入angular2代码库和学习的情况下做到这一点它，我可能会在接下来的几周内完成），我将编辑此回复并让您知道。在此期间，请继续关闭并查看是否可以让它工作并让我知道！

在我看来，角度2的采用需要尽快为任何行业领导者所采用，因为使用angular2的优势无法表达得足够多。不幸的是，由于在任何应用程序中绝对需要的许多指令仍然使用角度1.4，因此从业务角度来看，在使用angular2之前，需要使用UpgradeAdapter（ngUpgrade）。

编辑：

实际上，似乎定义文件现在位于angular2源中，而不是tsd。尝试从angular2源获取d.ts文件，然后尝试编译打字稿文件。

Answer 3

Setup ASP.Net 5 with angular 2.0按照页面中的所有步骤操作。它对我有用。

将all.ts文件编译为.js，无论服务器是否正在运行。

打开PowerShell - ＆gt;重定向到项目的根文件夹并键入“tsc”。它将编译所有文件。

如果要在保存/更新.ts文件时编译所有.js文件，请在PowerShell中键入'tsc-watch'，不要关闭它。

您必须安装Node。

创建以下文件和数据必须与Angualr quick start

相同

tsconfig.json
typings.json
的package.json

Visual studio plugin to open project root folder in CMD or PowerShell