Visual Studio 2015 中带有 .Net Core 的 Angular 2 Hello World 应用程序的快速教程

Created: November-22, 2018

脚步：

创建空 .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