ASP.Net Core 2.1 Angular SSR/Universal returning Http Status Code 404

Question

With SpaPrerenderingExtensions available in ASP.Net core 2.0 JavaScriptServices, it seems that we can return the HTTP Status Code from the Angular

Answer 1

I am posting this as an answer because I can format things better than in a comment, however this is all untested and based of looking at my outdated solution, your code snippets above, and the Angular6 docs (I don't have the latest VS templates so I can't test at the moment).

The options parameter object that is given to both renderModule() and renderModuleFactory() has an extraProviders array that, I believe, will let us add additional providers to the AppServerModule module.

Here is my idea:

• Use my HttpStatusCodeService from my answer here: Return 404 status code in aspnet core SPA Angular application
• Add it to the providers array in the AppBrowserModule module (only the browser module, not the server module).
  • This will allow the service to be injected normally while the app is running in the browser.
• Instantiate HttpStatusCodeService in main.server.ts file and add that instance as a provider in the extraProviders array.
  • This will allow the service to be injected while the app is running on the server while also giving us a reference to the injected service.
• Use the reference to the service to determine if the response needs to be a 404.

Here is my untested attempt to modify your main.server.ts file snippet to work.

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.module.server';

//ADD THIS LINE
import { HttpStatusCodeService } from './path/to/services/http-status-code.service';

enableProdMode();

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

  //ADD THIS LINE - We manually instantiate the service so we have a reference to it.
  let statusCodeService = new HttpStatusCodeService();

  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 },

      //ADD THIS LINE - We add a provider for the service that uses our instance. 
      { provide: HttpStatusCodeService, useValue: statusCodeService },
    ]
  };

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

  return renderPromise.then((html) => {

    //ADD THIS LINE - get the status code from the service.
    let statusCode: number = statusCodeService.getStatusCode();

    return {
      html: statusCode == 404 ? 'Page not found!' : html, StatusCode: statusCode
    }

  });
});

In my original solution, I rendered my 404 Not Found page using an Angular component, so I wouldn't override the returned HTML (html: html, statusCode: statusCode).

And for the sake of completeness, here is the HttpStatusCodeService from the answer linked to above:

import { Injectable } from '@angular/core';

@Injectable()
export class HttpStatusCodeService {

  private statusCode: number;

  constructor(){
    this.statusCode = 200;
  }

  public setStatusCode(statusCode: number) {
    this.statusCode = statusCode;
  }

  public getStatusCode(): number {
    return this.statusCode;
  }
}

Let me know if this works. If it doesn't, I can try to get a test environment set up to poke at this some more, but no promises.

Answer 2

Ok, I tried below approach and it seems to work, any feedback and improvements would be highly welcomed. I am not sure if this approach is thread safe. What I mean is if concurrent requests are served by the server, is it possible that the status code of one request is assigned to other request since this approach is taking benefit of the fact that the sub properties of constant objects are mutable.

I created a file globals.ts with below code:

export const response = { statusCode: 200 };

Then, I created a service StatusCodeService

import { Injectable } from '@angular/core';
import * as myGlobals from './globals';

@Injectable()
export class StatusCodeService {

  setStatusCode(statusCode: number) {
    myGlobals.response.statusCode = statusCode;
  }

}

Now whenever I have to set the status code, I use this service to set status code.

I have also updated the main.server.ts file with below code to pass value to the server:

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.module.server';

import * as myGlobals from './app/globals';

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) => {

    let statusCode: number = 200;
    if (myGlobals.response.statusCode == 404) {
      statusCode = 404;
      //reset status code to 200 for next request
      myGlobals.response.statusCode = 200;
    }

    return {
      html: statusCode == 404 ? 'Page not found!' : html, StatusCode: statusCode
    }

  });
});

I also tried the approach mentioned in Return 404 status code in aspnet core SPA Angular application

I updated the main.server.ts file for Angular 6.

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { APP_BASE_HREF } from '@angular/common';

import { first } from 'rxjs/operators';

import { enableProdMode, ApplicationRef, NgZone } from '@angular/core';
import { platformDynamicServer, PlatformState, INITIAL_CONFIG } from '@angular/platform-server';
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
import { AppServerModule } from './app/app.module.server';

import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

//ADD THIS LINE
import { HttpStatusCodeService } from './path/to/services/http-status-code.service';

enableProdMode();

export default createServerRenderer(params => {

  const { AppServerModule, AppServerModuleNgFactory, LAZY_MODULE_MAP } = (module as any).exports;

  const providers = [
    provideModuleMap(LAZY_MODULE_MAP),
    { provide: INITIAL_CONFIG, useValue: { document: '<app-root></app-root>', url: params.url } },
    { provide: APP_BASE_HREF, useValue: params.baseUrl },
    { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
  ];

  return platformDynamicServer(providers).bootstrapModule(AppServerModule).then(moduleRef => {
    const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
    const state = moduleRef.injector.get(PlatformState);
    const zone = moduleRef.injector.get(NgZone);

    //ADD THIS LINE: this will get the instance of the HttpStatusCodeService created for this request.
    //const statusCodeService = moduleRef.injector.get(HttpStatusCodeService);

    return new Promise<RenderResult>((resolve, reject) => {
      zone.onError.subscribe((errorInfo: any) => reject(errorInfo));
      appRef.isStable.pipe(first(isStable => isStable)).subscribe(() => {
        // Because 'onStable' fires before 'onError', we have to delay slightly before
        // completing the request in case there's an error to report
        setImmediate(() => {
          resolve({
            html: state.renderToString()//,

            //ADD THIS LINE: this will get the currently set status code and return it along with the prerendered html string
            statusCode: statusCodeService.getStatusCode()
          });
          moduleRef.destroy();
        });
      });
    });
  });
});

But when I run the app, its almost broken and have below issues:

• There isn't any style sheet in the generated markup. Server Transfer State is missing. fxFlex layout doesn't work.