Enable SSR for Angular 6 with .NET core 2

Question

I have created a website using Angular 6 as my front-end and .Net Core 2.0 as my back-end. I do not have SSR enabled and so far everything works fine. Now, I am trying to enable SSR by following the Angular Universal docs (https://angular.io/guide/universal) and .Net Core docs (https://docs.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) but fails!

I believe the problem lies with the main.server.ts file - According to .NET Core docs, my main.server.ts should look like:

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 }));
});

and according to Angular, the main.server.ts should look like this:

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

I have tried both, and this is the output: When I use main.server.ts as .NET Core suggested, I get the following error:

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

following some more exceptions (but I believe this line caused other errors). When I try using the main.server.ts as Angular suggested, I get the following error when the browsers loads:

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.

I have been straggling with this for few days without success. Please note, this is a working website with a lot of 3rd party libraries imported, so all the simple "create site - enable SSR - tada all works" doesn't fit...

Any pointers? Thank you!

** EDIT ** Adding my main.ts as well

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

I'd check that the output path for the SSR setup in the angular.json matches what you e got in your Startup.cs. I had this problem where Startup.cs was pointing to /dust/server but the build was compiling into /dist-server/ — Matt Brewerton

Timich Timich · Accepted Answer · 2018-11-17T19:24:57

If you haven't solved this issue, try to add types": [ "node" ] to your tsconfig.app.json.

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

Enable SSR for Angular 6 with .NET core 2

1 Answers