从零开始搭建基于.Net Core 2.1 与 Angular6

前言

自从.NetCore2.1发布之后，一直碎碎念着了解下最新框架；最近终于有时间了，恰逢Angular发布了6.2版本，一切都是安排好的...
之前并没有接触过Angular，只是知道它是基于MVC思想发展起来的前段框架（对此没有任何概念）。在了解过程中才发现，真是强大到不止一点点。

不唠了，直接上干货！

1. 安装Node.js
2. 更新NPM的包地址
3. 通过NPM安装Angular CLI模块；
4. VS2017新建项目.NetCore Web项目
5. 添加Angular CLI模块到项目中；
6. 更新Angular输出文件目录
7. 更新项目生成输出地址
8. 安装Angular的依赖项
9. 编译Angular项目
10. 更新WebCore项目注入服务和中间件
11. F5运行看结果

安装Node.js

根据电脑下载合适的版本，推荐稳定版；安装Node.js会自动安装NPM包管理器，VS2017也集成了NPM包管理器，大概和Nuget差不多的存在；可以执行命令行看到已经安装

image.png
Node.js下载

更新NPM的包地址

默认NPM包地址，安装包依赖会出现错误。可能我的电脑是个例外<>! 建议更新为淘宝国内的链接

--原生
metrics-registry = "https://registry.npmjs.org/"
--淘宝
metrics-registry=https://registry.npm.taobao.org
--执行命令行
npm config set metrics-registry https://registry.npm.taobao.org

可以打开这个文件看执行成功

image.png

通过NPM安装Angular CLI模块

这个没什么说的，通过Npm包管理器的命令行界面，安装Angular CLI模块，需要注意的是如果安装失败要记得清空NPM缓存；可以调用命令行查看安装成功；

--安装命令 其中-g指全局安装，和windows的pash变量一样
npm install -g  @angular/cli
--安装失败后，清除缓存
npm uninstall –g @angular/cli  
npm cache clean --force  //最新版需要加上 --force才能清楚

如图：

image.png
image.png

VS2017新建项目.NetCore Web项目

老套路点点点就可以了，使用MVC模式创建网站；至于勾选新建GIT存储库，是为了源码管理；
我们输入解决方案的名字 CoreAnugularWeb

image.png
image.png

添加Angular CLI模块到项目中

终于到二者融合的地方了；Window 运行调出cmd命令行，因为我们创建解决方案的时候勾选了为解决方案创建目录，现在的目录结构是这样

image.png

下一步 cd 到项目的根目录的上一级执行添加命令；

image.png

所以添加成功之后，我们的解决方案会出现很多新的文件，这些是Angular的项目文件；我们做一下改动将src这个目录名称改为ClientApp 这样正式一点...

image.png

到此我们的网站雏形就出来了；

--skip-install 跳过下载包，等编译Angular再下载
ng new CoreAnugularWeb --skip-install

更新Angular输出文件目录

Angular默认有自己的输出路径,但那不是我们想要的；修改angular.json 配置文件中 outputPath的值为wwwroot；因为我们更新了src文件夹的名称，所以需要批量修改src路径为ClientApp ;

• 简单说一下，Angular 6的配置文件改为了 angular.json 不再是angular-cli.json

更多文件详情进入官网介绍
Angular目录详情介绍

image.png

安装Angular的依赖项

刚才我们往项目中添加Angular时并没有下载依赖的安装包，现在可以下载依赖了;通过管理员模式cd到项目的根路径，执行命令行。下载的包比较多耐心等待

npm install

image.png

这一步经常出现提示权限不足的问题，可以尝试切换命令行工具为 Power shell 重新执行 或者 执行清除缓存的命令行

npm cache clean --force

编译Angular项目

安装完成后，需要编译Angular项目；并生成文件到我们指定的wwwroot目录下；

image.png

更新WebCore项目注入服务和中间件

最后一步，需要更新我们WebCore网站的生成方法；
在解决方案中打开startup文件。

简单看一下微软对这个文件的介绍，其实就是注入服务以及服务的处理方法也就是所谓的管道

image.png

微软官方更多介绍

不明觉厉，甭管他直接上

• 在ConfigureServices服务中注入

services.AddSpaStaticFiles(configuration =>
      {
        configuration.RootPath = "wwwroot";
      });

image.png

• 在Configure中调用

      app.UseSpaStaticFiles();

image.png

F5运行看结果

到此结束，F5走起

image.png

总结：

感觉好麻烦，因为Angular不能随着VS编译 自动编译，而是需要自己来。这一点有大神已经解决，但是实在不想看了。把链接放在下边自己来吧

查看的资料

本文大部分依赖于此大神的文章 Net Core构建Angular4应用程序
Angular的官方文档 官方文档
微软官方NetCore文档
官方NetCore文档