在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 应用:
完成所有Angular2应用文件的添加后,需要通过任务运行器资源管理器运行 Gulp 任务。这将把所有文件从“Scripts”文件夹复制到“wwwroot”文件夹。
根据需要修改 index.cshtml 文件。
修改 _layout.cshtml 文件,并添加 Angular2 相关的 script 标签。