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

Question

我创建了一个网站，使用 Angular 6 作为前端，使用 .Net Core 2.0 作为后端。我没有启用 SSR，到目前为止一切正常。现在，我尝试按照 Angular Universal 文档(https://angular.io/guide/universal)和 .Net Core 文档(https://learn.microsoft.com/en-us/aspnet/core/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)启用 SSR，但失败了!

我认为问题在于 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.

几天来我一直在努力解决这个问题，但没有成功。请注意，这是一个导入了很多第 3 方库的工作网站，因此所有简单的“创建站点 - 启用 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"
  ]
}