.NET Core Angular 7 服务器端渲染

Question

我正在尝试使用 dotnet core 创建一个 Angular 7 SSR 来托管它，默认模板使用 angular 5 并且 MS 有文档来获取 SSR 运行ning那（效果很好）我尝试通过命令行升级到 angular 7 并开始一个新的 angular 项目并在之后实施 SSR 但我总是遇到同样的问题，包括 ng build 和ng build:SSR 从命令行工作正常但是当我从 VS 进入运行它时它在抛出错误后超时（我认为这与问题无关）：

The thread 0x6608 has exited with code 0 (0x0).
The thread 0x1134 has exited with code 0 (0x0).
The thread 0x54bc has exited with code 0 (0x0).

我对 NG5 SSR 所做的更改 (https://go.microsoft.com/fwlink/?linkid=864501) 紧随其后的 (https://github.com/aspnet/Templating/issues/593) 是：

startup.cs

options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";

至

options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.js";

再次添加SSR项目到angular.json

 "ssr": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "optimization": false,
              "outputHashing": "media",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "bundleDependencies": "all",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    }

在 package.json 个脚本中更改 build:ssr

"build:ssr": "ng build --configuration=production --project=ssr",

我的代码是运行ning - https://github.com/TPJ11/DotnetNG7SSR

有没有人知道我做错了什么？感觉我一直在用头撞墙:(

Answer 1

是的，所以不确定是什么破坏了应用程序，但我有解决办法。

1) 创建一个新的 .Net Core NG 应用程序并删除 ClientApp 文件夹，然后通过 CMD 创建一个名为 ClientApp ng new ClientApp

的空白 angular 7 应用程序

2) 按照 angulars SSR setup guide 到第 3 步。

3) 安装 aspnet-prerendering npm i aspnet-prerendering

4) 交换步骤 2c (main.server.ts) 中的代码以将 Microsoft setup guide 中的代码用于 main.server.ts

5) 打开 angular.json 文件并将构建的 outputPath 更改为 dist 并将服务器的 outputPath 更改为 dist-server

6) 打开 package.json 并在 scripts 内添加 "build:ssr": "ng run ClientApp:server"

7) 打开 tsconfig.server.json 和 tsconfig.app.json 并更改 types 以包含节点 "types": ["node"]

8）打开Startup.cs，如图Microsoft setup guide添加

spa.UseSpaPrerendering(options =>
{
    options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.js";
        options.BootModuleBuilder = env.IsDevelopment()
            ? new AngularCliBuilder(npmScript: "build:ssr")
                : null;
    options.ExcludeUrls = new[] { "/sockjs-node" };
});

Answer 2

我按照以下步骤操作，至少在第一个运行中工作正常。

使用 CLI 或 Visual Studio
用这个项目的 ClientApp 替换完整的 ClientApp 文件夹- https://github.com/joshberry/dotnetcore-angular-ssr

修改Startup.cs使用SSR

spa.UseSpaPrerendering(options =>
        {
            options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.js";
                options.BootModuleBuilder = env.IsDevelopment()
                    ? new AngularCliBuilder(npmScript: "build:ssr")
                        : null;
            options.ExcludeUrls = new[] { "/sockjs-node" };
        });

.NET Core Angular 7 服务器端渲染

.NET Core Angular 7 Server Side Rendering

.net-core

server-side-rendering

angular-universal

angular

angular7