基于 Asp.Net Core MVC 的 Angular4 SSR 英雄指南

2022-11-01 19:57:02

为啥有这篇文章

在之前，类似 Angular、React、Vue 之类的前端框架的一个痛点就是无法在服务端提前把网页内容写入到网页中再发回浏览器，这给网站的 SEO 增加了不少困难，因为爬虫爬到的页面只包含加载内容的 js 源码，而网页内容部分都还是各种模板占位符。现在，Angular4 正式的推出了 angular/universal 这个用来支持在服务端渲染 Angular 应用的包，再加上 Angular 团队与 AspNet 团队的不懈努力，现在在 Asp.Net Core MVC 应用中使用 Angular 作为网站前端框架非常方便，同时支持服务端渲染功能，简直美滋滋。

接下来就让我们通过经典的 英雄指南 应用来快速的感受一下 SSR 的快感。

搭建开发环境

首先，你需要安装以下的软件：

dotnet-cli 1.0.4+
nodejs 8+
Visual Studio 2017 / Visual Studio Code
git

注意：下面所有的命令均是在 PowerShell 中执行的

安装完上面的工具之后，将这个仓库克隆到你的电脑上，他是一个相对来说很纯洁的起始模板。

接着来安装 Angular 所需要的依赖：

npm i

然后生成 WebPack 的 vendor.js：

./webpack-restore.ps1

然后再来安装 Asp.Net Core Mvc 需要的 Nuget 包：

dotnet restore

到目前为止，我们的项目就可以运行了：

dotnet run

我们的项目结构大概是这样的：

│  .gitattributes
│  .gitignore
│  MyBlog.sln
│
├─.vscode
│      launch.json
│      settings.json
│      tasks.json
│
└─Blog.Web
    │  appsettings.json
    │  Blog.Web.csproj
    │  global.json
    │  package.json
    │  Program.cs
    │  Startup.cs
    │  tsconfig.json
    │  web.config
    │  webpack-restore.ps1
    │  webpack.config.js
    │  webpack.config.vendor.js
    │
    ├─.template.config
    │      icon.png
    │
    ├─bin
    │
    ├─ClientApp
    │  │  boot-client.ts
    │  │  boot-server.ts
    │  │
    │  ├─app
    │  │  │  app.module.client.ts
    │  │  │  app.module.server.ts
    │  │  │  app.module.shared.ts
    │  │  │
    │  │  └─components
    │  │      └─app
    │  │              app.component.css
    │  │              app.component.html
    │  │              app.component.ts
    │  │
    │  └─dist
    │          main-server.js
    │          vendor-manifest.json
    │          vendor.js
    │
    ├─Controllers
    │      HomeController.cs
    │
    ├─Views
    │  │  _ViewImports.cshtml
    │  │  _ViewStart.cshtml
    │  │
    │  ├─Home
    │  │      Index.cshtml
    │  │
    │  └─Shared
    │          Error.cshtml
    │          _Layout.cshtml
    │
    └─wwwroot
        │  favicon.ico
        │
        ├─css
        │      styles.css
        │
        └─dist
                main-client.js
                main-client.js.map
                vendor-manifest.json
                vendor.js

看起来可能比官方的例子要复杂一些，但至少不是太过复杂，毕竟还包括了一个完整的后台服务器。

保持前端的实时编译

微软团队很周到的考虑到了这个开发过程中的需求，所以这个功能已经集成进你的 C# 代码里面了，所以你不需要做任何额外的配置。

如果你是通过命令行来启动网站，需要手动设置一下环境变量：

$env:ASPNETCORE_ENVIRONMENT="Development"

然后执行：

dotnet run

那么现在，就可以完全按照官方的教程来学习英雄指南了。

针对服务端渲染的一些改变

怎么会有三个 app.module 跟两个 boot.xxx.ts ？

boot.xxx.ts 相当于官方英雄指南中的 main.ts 用于引导 Angualr 应用启动，有两个是为了在浏览器跟服务器环境中使用不同的配置来启动 Angular 应用。

由于不同环境的差异，Angular 需要针对不同的运行环境来引入特定的 module，然后，app.module.shared.ts 就相当于英雄指南中 app.module.ts 了。

index.html 在哪里？

在官方的实例中，有个 index.html，在我们的这个项目中，与之对应的是 Home/Index.cshtml，服务端渲染也是从这里起步的。

全局的 style.css 在哪里？

官方项目的 systemjs 的打包脚本中加入了一个用来存放全局样式的 style.css，我这里就很简单粗暴的放在了 wwwroot/css/style.css ，然后在 Index.cshtml 中直接引用。

服务端渲染时是怎么加载 http 请求获取的数据的？

服务端渲染时会发出请求来获取数据，但是由于服务端没有浏览器的环境，无法对域名做出自己的判断，所以，http 请求的路径必须完整的包含域名与路径，如果为了更好的兼容性，可以这么来写：

import { isPlatformServer } from "@angular/common";
...

constructor(
        private http: Http,
        @Inject(PLATFORM_ID) private platformId: Object) {
        // 针对服务器环境，手动设置请求地址
        if (isPlatformServer(this.platformId)) {
            this.heroesUrl = 'http://localhost:5000' + this.heroesUrl;
        }
    }

学会接受异常输出

由于 Kestrel 的设计原因，在启用了 HMR （Hot Module Replacement）之后，你可能经常的发现会有关于 Kestrel 的异常抛出显示在命令行，不用太过担心，这是 websocket 被强制切断造成的，而且这个异常并不会对你的应用造成负面影响，更何况，在实际的生产阶段，HMR 是被关闭的，所以在开发的时候，稍微忍一忍就好了。

Mock HTTP？

在官方的指南中使用到了一个用来模拟后台服务器的包，但是这对于一个 Asp.Net 程序来说，这个包是完全没有必要的，我们可以使用 EF Core 的 InMemmoryDb 来作为模拟数据库，然后通过 ASP.NET Core MVC 来提供类似的 RESTful API。

总结

Asp.Net Core MVC 对 Angular 的服务端渲染的支持总体来说还是相当不错的，符合微软一贯的风格，开箱即用，封装底层，对于一个普通的后端程序员来说可以很好的避免直接接触 WebPack 这个东西，2333，最后送上完整的英雄指南。

码农公寓