在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程(2)

其实原因很简单,微软一如既往的作风就是高度集成高度封装。他所提供的这些模板中,集成Server-side prerendering(服务端渲染),WebPack dev middleware,Hot Module Replacement(模块热插拔)等等技术。最后再加上Angular。

如果你对这些技术了解程度不够,很难做到高度扩展。例如添加新的npm包也会有可能引起一些莫名其妙的异常。所以,我们才要自己去构建集成Angular的Asp.Net Core的应用程序。

有兴趣的童鞋可以自己去尝试一下。

让我们开始把 1.新建一个Asp.Net Core项目

打开宇宙最强IDE,Visual Studio 2017,新建一个Asp.Net Core项目。并且取个名字,比如AspNetCoreWithAngular4:

image

之后我们创建一个空的Asp.Net Core 程序,我是用的版本是1.1

image

2. 配置我们的Asp.Net Core

这一步,我们需要配置一些Core的依赖包,并且设置Core在VS重构时MSBuild不去编译Typescript文件,因为我们要使用其他工具去编译Typescript文件。

直接打开csproj文件:

image

添加如下代码:

image

代码:

<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.3" /> <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.2" />

在我们的项目中,Microsoft.AspNetCore.Mvc包能够允许我们添加控制器并且构建WebAPI,而Microsoft.AspNetCore.StaticFiles包可以让我们配置提供静态目录访问的功能。例如默认提供/wwwroot目录的访问。

因为我们会使用其他工具去编译Typescript文件,所以需要在PropertyGroup节点中配置

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

保存csproj文件后,VS2017会自动下载相关包。如果你在MacOS或者Linux环境,请使用dotnet restore命令还原包。

3. 配置Startup.cs文件

首先在ConfigServives方法中添加MVC服务:

services.AddMvc();

image

如果VS出现红色波浪线,你需要关闭项目,重新打开项目即可。

之后,删除Configure方法中的所有代码,使用如下代码替换:

image

app.Use(async (context, next) => {
   
await next();
   
if (context.Response.StatusCode == 404 &&
      !System.IO.Path.HasExtension(context.Request.Path.Value) &&
      !context.Request.Path.Value.StartsWith("/api/"))
    {
        context.Request.Path
= "/index.html";
       
await next();
    }
});

app.UseMvcWithDefaultRoute();

app.UseDefaultFiles();
app.UseStaticFiles();

这里简单说一下,首先第一个app.Use中间件的作用是当系统返回404状态码并且访问的Request不包含文件扩展名并且访问Request不是以“/api/”开头的访问直接将其跳转到/index.html

app.UseMvcWithDefaultRoute()的意思是使用MVC的默认路由中间件。

app.UseDefaultFiles()的意思是启用默认文档提供器中间件,他会对只有主机的URL进行访问时搜索default.html、default.htm、index.html、index.htm文件,如果有就返回内容。

app.UseStaticFiles()的意思启用程序的静态文件支持,也就是启用wwwroot文件夹可以通过URL访问。

4. 创建一个APIController

在根目录中创建一个Controllers的文件夹,当然直接在根目录创建一个WebAPIController也可以。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/13680.html