Question

我正在尝试使用dotnet核心创建Angular 7 SSR来托管它，默认模板使用angular 5，并且MS拥有文档来使SSR在其上运行（效果很好），我尝试通过命令行升级到angular 7并开始一个新的angular项目并在之后执行SSR，但是我总是遇到相同的问题，ng build和ng build：SSR在命令行上都可以正常工作，但是当我从VS运行它时，它超时了（我认为与该问题无关）在引发错误后：

program Project1;

{$APPTYPE CONSOLE}

{$R *.res}

uses
  System.SysUtils,
  windows,
  uMFT;

type
  USN = LONGLONG;
const
  BUF_LEN = 4096;
var
  hVol: THandle;
  JournalData: TUSNJournalData;
  dwBytes: DWORD;
  dwRetBytes: DWORD;
  ReadData: TReadUSNJournalData;
  i: Integer;
  Buffer: array [0..BUF_LEN - 1] of Byte;
  UsnRecord: PUSNRecord;
  FileName: PWideChar;
  SysTime: TSystemTime;
begin
  hVol := CreateFile( '\\.\c:', GENERIC_READ,
      FILE_SHARE_READ or FILE_SHARE_WRITE, nil, OPEN_EXISTING, 0, 0);

  if hVol = INVALID_HANDLE_VALUE then begin
    Writeln(Format('CreateFile failed (%d)', [GetLastError]));
    Exit;
  end;

  if not DeviceIoControl(hVol, FSCTL_QUERY_USN_JOURNAL, nil, 0, @JournalData,
      SizeOf(JournalData), dwBytes, nil) then begin
    Writeln(Format('Query journal failed (%d)', [GetLastError]));
    Exit;
  end;

  ZeroMemory(@ReadData, SizeOf(ReadData));
  ReadData.ReasonMask := $FFFFFFFF;
  ReadData.UsnJournalID := JournalData.UsnJournalID;

  Writeln(Format('Journal ID: %x', [JournalData.UsnJournalID]));
  Writeln(Format('FirstUsn: %x' + sLineBreak, [JournalData.FirstUsn]));

  for i := 0 to 10 do begin
    FillChar(Buffer, BUF_LEN, 0);

    if not DeviceIoControl(hVol, FSCTL_READ_USN_JOURNAL, @ReadData,
        SizeOf(ReadData), @Buffer, BUF_LEN, dwBytes, nil) then begin
      Writeln(Format('Read journal failed (%d)', [GetLastError]));
      Exit;
    end;
    dwRetBytes := dwBytes - SizeOf(USN);

    // Find the first record
    UsnRecord := PUsnRecord(NativeInt(@Buffer) + SizeOf(USN));

    Writeln('****************************************');

    while dwRetBytes > 0 do begin

      Writeln(Format('USN: %x', [UsnRecord.Usn]));

      GetMem(FileName, UsnRecord.FileNameLength + SizeOf(Char));
      Move(Pointer(NativeInt(UsnRecord) + UsnRecord.FileNameOffset)^, FileName^,
          UsnRecord.FileNameLength);
      FileName[UsnRecord.FileNameLength div 2] := #0;
      Writeln(Format('File name: %s', [FileName]));
      FreeMem(FileName);

      FileTimeToSystemTime(@UsnRecord.TimeStamp, SysTime);
      Writeln(Format('Time stamp: %s', [DateTimeToStr(SystemTimeToDateTime(SysTime))]));
      Writeln(Format('Reason: %x', [UsnRecord.Reason]));
      Writeln;

      dwRetBytes := dwRetBytes - UsnRecord.RecordLength;

      // Find the next record
      UsnRecord := PUsnRecord(NativeInt(UsnRecord) + UsnRecord.RecordLength);
    end;
  end;
  CloseHandle(hVol);

  Writeln;
  Writeln('End of sample');
  Readln;
end.

我对NG5 SSR（here）所做的更改以下（https://go.microsoft.com/fwlink/?linkid=864501）是：

startup.cs

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).

到

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

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

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

在package.json脚本中更改build：ssr

 "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"
                }
              ]
            }
          }
        }
      }
    }

代码正在运行-https://github.com/aspnet/Templating/issues/593

有人知道我在做什么错吗？感觉就像我一直在用头撞在墙上的:(

Answer 1

对，所以不确定是什么原因破坏了应用程序，但我可以解决。

1）创建一个新的.Net Core NG应用程序并删除ClientApp文件夹，然后通过名为ClientApp ng new ClientApp的CMD创建一个空白的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创建一个新的.net核心项目
用此项目中的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服务器端渲染

2 个答案: