Angular 2 TypeScript 配置和 Visual Studio 2015 调试

引言

在本文中，我将专注于 Visual Studio 2015 的配置，而不会深入探讨 Angular 2。文章中的 Angular 代码基于 http://angular.io 的教程，并做了一些修改。文章包含在 ASP.NET 4.5.2 和 ASP.NET 5 项目模板中定义 Visual Studio 2015 配置和 Angular 2 默认应用程序的说明。

背景

我写这篇文章是因为我花费了大量时间来研究适用于 Angular 2 TypeScript 开发和调试的 Visual Studio 2015 配置。我阅读了大量的文章和社区讨论，但没有得到清晰可行的配置答案。在撰写本文时，我使用的是 Visual Studio 2015 社区版（更新 1）和 TypeScript 版本 1.7。

ASP.NET 4.5.2 模板

1. 创建 **ASP.NET Web Application** 项目，并为应用程序命名，例如：WebApplication1。

2. 从 ASP.NET 4.5.2 模板列表中选择 **Web API** 项目模板。

 

 

 

 

 

 

 

 

 

 

 

3. 在项目根文件夹中添加 package.json 文件，并设置以下内容。

 

 

 

 

 

 

 

 

 

 

 

4. 在项目根文件夹中添加 gulpfile.js 文件，并定义以下脚本。

 

 

 

 

 

 

 

 

 

 

 

5. 右键单击 gulpfile.js 文件，选择 Task Runner Explorer。右键单击 moveToLibs，然后选择 Run。执行后，您可以在 Scripts/libs 和 Content/libs 文件夹下找到复制的文件。

 

 

 

6. 在项目根文件夹中创建 app 文件夹。

7. 在 app 文件夹中添加 app.component.ts TypeScript 文件。您也可以在 var test = null; 这一行设置断点。

 

 

 

 

8. Visual Studio 会询问是否为应用程序添加 TypeScript 支持。

 

 

 

 

 

9. 在 app 文件夹中添加 main.ts TypeScript 文件。请注意！您必须在 main.ts 文件的顶部添加 ///<reference path="../node_modules/angular2/typings/browser.d.ts"/>，否则您将收到编译错误。

 

 

 

10. 打开 /Views/Shared/_Layout.cshtml 并设置以下代码。请注意！您必须在 System.config 中定义 meta，否则 Visual Studio 断点将无法工作。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

11. 打开 /Views/Home/Index.cshtml 并设置以下代码。

 

12. 右键单击 WebApplication1 项目，选择 Unload Project，然后选择 Edit WebApplication1.csproj。请注意！您必须在项目文件中定义 TypeScriptModuleKind 和 TypeScriptModuleResolution ，否则 Visual Studio 断点将无法工作。

 

 

 

 

 

 

 

 

13. 编译并调试应用程序。

 

 

ASP.NET 5 模板

1. 创建 **ASP.NET Web Application** 项目，并为应用程序命名，例如：WebApplication2。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 从 ASP.NET 5 模板列表中选择 **Web API** 项目模板。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 在项目根文件夹中添加 tsconfig.json 文件（TypeScript JSON Configuration File）。请注意！您必须在项目文件中定义 module 和 moduleResolution ，否则 Visual Studio 断点将无法工作。

 

 

 

 

 

 

 

 

 

 

4. 在项目根文件夹中添加 package.json 文件，并设置以下内容。

 

 

 

 

 

 

 

 

 

5. 在项目根文件夹中创建 gulpfile.js 文件，并定义以下复制脚本。

 

 

 

 

 

 

 

 

 

 

6. 右键单击 gulpfile.js 文件，选择 Task Runner Explorer。右键单击 moveToLibs，然后选择 Run。执行后，您可以在 Scripts/libs 和 Content/libs 文件夹下找到复制的文件。

 

 

 

7. 在 wwwroot 文件夹下创建 app 文件夹。

8. 在 wwwroot 文件夹中添加 app.component.ts TypeScript 文件。您也可以在 var test = null; 这一行设置断点。

 

 

 

 

9. 在 wwwroot 文件夹中添加 main.ts TypeScript 文件。请记住在 main.ts 文件的顶部添加 ///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>，否则您将收到编译错误。

 

 

10. 在 wwwroot 文件夹中添加 index.html 文件。

 

 

 

 

 

 

 

 

 

 

 

 

 

11. 将 index.html 设置为启动页。

12. 编译并运行应用程序。也可以在 TypeScript 文件中设置一些断点并尝试调试。

 

调试

在这两种项目类型中，都有两个类似的配置可以启用调试。实际问题不在于 Angular，而在于 Visual Studio 与用于启动 Angular 应用程序的 SystemJS 模块加载器配合得不好。这并不是一个大问题，因为我们可以通过 Visual Studio 项目文件配置和 SystemJS 配置来解决这个问题。

在 ASP.NET 4.5.2 项目模板中，您需要在 System.config 中定义 meta 。此外，您还需要在 Visual Studio WebApplication1.csproj 项目文件中定义 TypeScriptModuleKind 和 TypeScriptModuleResolution 。

在 ASP.NET 5 项目模板中，您需要在 System.config 中定义 meta 。此外，您还需要在 Visual Studio tsconfig.json 项目文件中定义 module 和 moduleResolution 。

 

源代码

https://bitbucket.org/spylkkanen/angular2_visual_studio_debug