Visual Studio 2015 中带有 .Net Core 的 Angular 2 Hello World 应用程序的快速教程
脚步:
-
创建空 .Net 核心 Web 应用程序:
-
转到 wwwroot,创建一个名为 Index.html 的普通 html 页面:
-
配置 Startup.cs 以接受静态文件(这将需要在“project.json”文件中添加“Microsoft.AspNetCore.StaticFiles”:“1.0.0”库):
-
添加 NPN 文件:
-
右键单击 WebUi 项目并添加 NPN 配置文件(package.json):
-
验证包的最新版本:
注意:如果 visual studio 没有检测到软件包的版本(检查所有软件包,因为其中一些确实显示了版本,而其他软件包没有显示),可能是因为 Visual Studio 中的 Node 版本无法正常工作,因此可能需要在外部安装节点 js,然后将该安装与 visual studio 链接。
I。下载并安装节点 js: https : //nodejs.org/es/download/
II。将安装与 visual studio 链接: https : //ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ : iii。 (可选)保存 package.json 后它会在项目中安装依赖项,否则,使用命令提示符从 package.json 文件的同一位置运行
npm install
。注意:建议安装
Open Command Line
,这是可以添加到 Visual Studio 的扩展:
-
-
添加 TypeScript:
-
在 WebUi 项目中创建一个 TsScript 文件夹,仅用于组织(TypeScripts 不会进入浏览器,它们将被转换为普通的 JS 文件,而这个 JS 文件将是使用 gulp 进入 wwwroot foder 的文件,这个将在后面解释):
-
在该文件夹中添加“TypeScript JSON 配置文件”(tsconfig.json): 并添加下一个代码:
-
在 WebUi Project 的根目录中,添加一个名为 typings.json 的新文件: 并添加下一个代码:
-
在 Web 项目根目录中打开一个命令行并执行
typings install
,这将创建一个 typings 文件夹(这需要Open Command Line
作为步骤 4 中的注释中的可选步骤解释,数字 iii)。
-
-
添加 gulp 来移动文件:
- 在 Web 项目的根目录添加“Gulp 配置文件”(gulpfile.js):
- 添加代码:
-
在
tsScripts
文件夹中添加 Angular 2 引导文件:app.component.ts
app.module.ts
main.ts
-
在 wwwroot 中,创建下一个文件结构:
-
在 scripts 文件夹(但在 app 外),添加 systemjs.config.js: 并添加下一个代码:
-
执行 Gulp Task 以在 wwwroot 中生成脚本。
- 右键单击 gulpfile.js
- Task Runner Explorer i。如果未加载任务(“无法加载。请参阅输出窗口”)。转到输出窗口并查看错误,大多数时候是 gulp 文件中的语法错误。
- 右键单击默认任务和运行(这将需要一段时间,确认消息不是很精确,它显示它已完成但过程仍在运行,请记住这一点):
-
修改 Index.html,如:
-
现在跑步和享受。
笔记:
- 如果使用 typescript 编译错误,例如
TypeScript Virtual Project
,则表明 Visual Studio 的 TypeScript 版本未根据我们在“package.json”中选择的版本进行更新,如果发生这种情况请安装: https : //www.microsoft.com/en-us/download/details.aspx?id = 48593
- 如果使用 typescript 编译错误,例如
参考文献:
-
Pluorah 中的 Deborah Kurata 的“Angular 2:入门”课程:
https://www.pluralsight.com/courses/angular-2-getting-started-update
-
Angular 2 官方文档:
-
Mithun Pattankar 的文章:
http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/
http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/