.NET Core Angular 7服务器端渲染

问题描述

我正在尝试使用dotnet核心创建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文件夹，然后通过名为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)中的代码，以使用针对main.server.ts的Microsoft安装指南

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": ["node"]

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

8)打开Startup.cs，如 Microsoft安装指南添加

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