Angular2 应用与 Visual Studio 2015 集成指南

Visual Studio 2015Update 3 中集成 Angular2 应用可能会遇到一些挑战,但遵循本文的步骤,将能够轻松地完成设置。

先决条件

在开始之前,请确保已经安装了以下软件:

使用代码

创建一个新的ASP.NET Core项目,并确保取消勾选“Application Insights”选项。选择“Web 应用程序”模板,并设置“身份验证”为“无身份验证”。

在解决方案中添加一个新的 NPM 配置文件,例如 package.json

package.json 文件中添加以下内容:

{ "name": "angular2withvs2015", "version": "1.0.0", "dependencies": { "@angular/common": "~2.1.1", "@angular/compiler": "~2.1.1", "@angular/core": "~2.1.1", "@angular/forms": "~2.1.1", "@angular/http": "~2.1.1", "@angular/platform-browser": "~2.1.1", "@angular/platform-browser-dynamic": "~2.1.1", "@angular/router": "~3.1.1", "@angular/upgrade": "~2.1.1", "bootstrap": "3.3.7", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.39", "zone.js": "^0.6.25" }, "devDependencies": { "gulp": "3.9.1", "rimraf": "^2.5.4", "gulp-typescript": "^3.1.2", "typescript": "^2.0.7", "gulp-tsc": "^1.2.5", "@types/node": "6.0.40" } }

在解决方案中创建一个名为“Scripts”的文件夹,用于存放TypeScript代码(.ts 文件)。

在“Scripts”文件夹中添加一个名为 tsconfig.json 的 TypeScript JSON 配置文件,并修改其内容,以确保所有 *.ts 文件都使用该配置文件进行编译。

在解决方案中添加一个 Gulp 配置文件。

打开 Visual Studio 开发者命令提示符,运行以下命令来安装 typings:

npm install typings -g

这将全局安装 typings。然后,运行以下命令来安装其余的依赖:

typings install dt~core-js --global --save typings install dt~node --global --save

修改 gulpfile.js 的内容,以确保能够将 node_modules 文件夹的内容和编译后的 TypeScript 文件复制到 wwwroot 目录。

需要几个文件来启动 Angular2 应用:

  • Systemjs.config.js - 这是从MVC.NET 应用程序开始的起点。
  • Main.ts - 这是编写引导代码的地方。
  • App.module.ts - 在此文件中定义主要的应用程序模块。
  • App.component.ts - 在此文件中创建第一个 Angular2 组件。

完成所有Angular2应用文件的添加后,需要通过任务运行器资源管理器运行 Gulp 任务。这将把所有文件从“Scripts”文件夹复制到“wwwroot”文件夹。

根据需要修改 index.cshtml 文件。

修改 _layout.cshtml 文件,并添加 Angular2 相关的 script 标签。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485