Angular 6.x – 404 page with correct header using Angular Universal

Based on my previous post about adding a 404 page in Angular 4.x, I have added a tweak to return the correct 404 status code header. This process, however, requires the Angular Universal integration. This post assumes that you already know how to setup your Angular application with Angular Universal.

The original 404 component

Based on my previous post, here is what the 404 page component looks like:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-notfound',
  templateUrl: './notfound.component.html'
})
 
export class NotfoundComponent { }

Adding the 404 status code

I have already upgraded to Angular 6.x since the Angular Universal integration. I have ditched my old ExpressJS server and replaced it with Angular Universal, which is still ExpressJS by the way. To be able to support both the client-side and server side (Universal), we need to know which environment we are running. Below is the full component code after my Angular Universal migration.

import { Component, OnInit, Optional } from '@angular/core';
import { PLATFORM_ID, APP_ID, Inject } from '@angular/core';
import { Title } from "@angular/platform-browser";
import { isPlatformBrowser } from '@angular/common';
import { RESPONSE } from "@nguniversal/express-engine/tokens";
import { Response } from 'express';

@Component({
  selector: 'app-notfound',
  templateUrl: './notfound.component.html'
})

export class NotfoundComponent implements OnInit {

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    @Inject(APP_ID) private appId: string,
    @Optional() @Inject(RESPONSE) private response: Response,
    private titleService: Title
  ) {
    this.titleService.setTitle('Lysender - Page Not Found');
  }

  ngOnInit() {
    if (!isPlatformBrowser(this.platformId)) {
      this.response.status(404);
    }
  }
}

We only show the status code when we are not running in the browser platform, ie: running on the server.

That’s it!

Posted in Angular, Web Development | Tagged , , | Leave a comment

Angular 6 – Add scroll to top when route changes

Since Angular apps are SPAs, the page does not reload when navigating through the application/website. If you happen to scroll to the bottom of the page and clicked a link, the next page will show the content near the bottom … Continue reading

Posted in Angular, Web Development | Tagged , | Leave a comment

Setting Title Tag for Angular Applications

Due to the nature of Angular apps being SPAs (single page application), historically, changing title tag or meta tags are not supported by default. However, due to SEO reasons, these features were added and works best when used in Angular … Continue reading

Posted in Angular, SEO, Web Development | Tagged | Leave a comment

Sweet Alert – Using Textarea as Content

We used Sweet Alert JavaScript plugin as a beautiful replacement for JavaScript alert and confirmation popups. It supports showing input box too which is good when asking for feedback from users. In our case, we needed a textarea instead and … Continue reading

Posted in JavaScript, Web Development | Tagged , | Leave a comment

My First Month in Stock Market

I started my first two weeks in stock market with so much hype, then I bought more that bring stress and sold and bought again bringing frustrations. However, there is no failure as I’ve learn so much from this experience. … Continue reading

Posted in Investments, Personal Blog | Tagged | Leave a comment

Angular 6 – Configure Angular Universal with pm2

Angular Universal allows Angular apps to be run in both the server and in the browser. Before, I used the plain Express server to serve the static Angular application and I used the pm2 tool to manage the server process. … Continue reading

Posted in Angular, NodeJS, Web Development | Tagged , , | Leave a comment

jQuery Steps plugin broken on Safari 11 when content has the $ character

We are using an old plugin called jQuery Steps in one of our important page. We received reports that the page is not working on a Mac High Sierra using Safari 11. I fired a BrowserStack test and found out … Continue reading

Posted in Web Development | Tagged , | Leave a comment

Learn Stock Trading By Virtual Trading From Investagrams

As a complete newbie on stock trading, I really have no idea on how to buy or sell stocks. Fortunately, a good friend of mine recommended virtual trading to learn how it works. He recommended Investagrams and I immediately signed … Continue reading

Posted in Investments | Tagged , | 3 Comments

My Journey To Stock Market Begins

Few years ago, I always dream of having a retirement strategy through stock market investments but either I have no extra money to fund my investments or I have difficulty signing up for an online broker. Now that I’m already … Continue reading

Posted in Investments | Tagged | Leave a comment

Using Angular-CLI with Yarn

Recently, I have switched from npm to yarn, however, it seems that my Angular CLI still uses npm. To configure Angular CLI to use yarn globally, just run this: For Angular 6 and above: For below Angular 6: This is … Continue reading

Posted in Angular | Leave a comment