.NET Core Angular 7 服务器端渲染

问题描述

我正在尝试使用 dotnet core 来创建一个 Angular 7 SSR 来托管它，默认模板使用 angular 5 并且 MS 有文档可以让 SSR 在其上运行(工作正常)我尝试通过命令行升级到angular 7 并开始一个新的 angular 项目并在之后实施 SSR，但我总是以同样的问题结束，ng build 和 ng build:SSR 从命令行都可以正常工作，但是当我从 VS 运行它时它超时了(我认为与问题无关)在抛出错误后:

I'm trying to create a Angular 7 SSR using dotnet core to host it, the default template uses angular 5 and MS have documentation to get SSR running on that (which works fine) I have tried upgrading via a command line to angular 7 and start a new angular project and implement the SSR after but I always end up at the same issue, both ng build and ng build:SSR work fine from command line but when I come to run it from VS it times out (which I think has nothing to do with the issue) after it throws an error:

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) 是:

The changes I made from NG5 SSR (https://go.microsoft.com/fwlink/?linkid=864501)following this (https://github.com/aspnet/Templating/issues/593) are:

startup.cs

startup.cs

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

到

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

再次将 SSR 项目添加到 angular.json

Added the SSR project again to 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

Change build:ssr within package.json scripts

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

代码正在运行 - https://github.com/TPJ11/DotnetNG7SSR

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

Has anyone got any idea what i'm doing wrong? feel like I've been banging my head against a wall on this :(

推荐答案

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

Right so not sure what it is that breaks the app but I have the work around.

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

1) Create a new .Net Core NG app and delete the ClientApp folder then create a blank angular 7 app via CMD called ClientApp ng new ClientApp

2) 按照 angulars SSR 设置指南直到第 3 步.

2) Follow angulars SSR setup guide up to step 3.

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

3) Install aspnet-prerendering npm i aspnet-prerendering

4) 交换步骤 2c (main.server.ts) 中的代码以使用 Microsoft 安装指南 main.server.ts

4) Swap the code from step 2c (main.server.ts) to use the code in Microsoft setup guide for main.server.ts

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

5) Open angular.json file and change the outputPath for build to dist and server's outputPath to dist-server

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

6) Open package.json and within scripts add "build:ssr": "ng run ClientApp:server"

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

7) Open tsconfig.server.json and tsconfig.app.json and change types to include node "types": ["node"]

8) 打开 Startup.cs 并如 微软安装指南添加

8) Open Startup.cs and as shown in Microsoft setup guide add

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 服务器端渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！