使用 .NET core 2 为 Angular 6 启用 SSR

Question

我创建了一个网站，使用 Angular 6 作为前端，使用 .Net Core 2.0 作为后端。我没有启用 SSR，到目前为止一切正常。现在，我正在尝试按照 Angular Universal 文档（https://angular.io/guide/universal）和 .Net Core 文档（https://docs.microsoft.com/en-us/aspnet/core）启用 SSR /client-side/spa/angular?view=aspnetcore-2.1&tabs=visual-studio&utm_source=jeliknes&utm_medium=blog&utm_campaign=medium&WT.mc_id=medium-blog-jeliknes#server-side-rendering）但失败了！

我认为问题出在 main.server.ts 文件上 - 根据 .NET Core 文档，我的 main.server.ts 应该如下所示：

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModule, renderModuleFactory } from '@angular/platform-server';
import { APP_BASE_HREF } from '@angular/common';
import { enableProdMode } from '@angular/core';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { createServerRenderer } from 'aspnet-prerendering';
export { AppServerModule } from './app/app.server.module';

enableProdMode();

export default createServerRenderer(params => {
  const { AppServerModule, AppServerModuleNgFactory, LAZY_MODULE_MAP } = (module as any).exports;

  const options = {
    document: params.data.originalHtml,
    url: params.url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP),
      { provide: APP_BASE_HREF, useValue: params.baseUrl },
      { provide: 'BASE_URL', useValue: params.origin + params.baseUrl }
    ]
  };

  const renderPromise = AppServerModuleNgFactory
    ? /* AoT */ renderModuleFactory(AppServerModuleNgFactory, options)
    : /* dev */ renderModule(AppServerModule, options);

  return renderPromise.then(html => ({ html }));
});

根据 Angular，main.server.ts 应该是这样的：

export { AppServerModule } from './app/app.server.module';

我都试过了，这是输出：当我按照 .NET Core 建议使用 main.server.ts 时，出现以下错误：

npmfail: AngularCliBuilder[0]
  ERROR in src/main.server.ts(13,75): error TS2304: Cannot find name 'module'.

遵循更多例外（但我相信这一行引起了其他错误）。当我尝试按照 Angular 建议使用 main.server.ts 时，在浏览器加载时出现以下错误：

NodeInvocationException: Prerendering failed because of error: Error: The module at ./dist/server/main.js does not export a default function, and you have not specified which export to invoke.

我已经为此挣扎了几天没有成功。请注意，这是一个导入了许多 3rd 方库的工作网站，因此所有简单的“创建站点 - 启用 SSR - tada 所有工作”都不适合......

任何指针？谢谢！

** 编辑 ** 也添加我的 main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// import 'hammerjs'; // imported from index.html

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

Answer 1

如果您还没有解决这个问题，请尝试将types": [ "node" ]添加到您的 tsconfig.app.json 中。

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [ "node" ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}