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