Table of Contents

• SEO Issues with Angular and GitHub Hosting
• Solution (Based on Angular 19)

SEO Issues with Angular and GitHub Hosting

 While creating a personal blog (https://hiperz.github.io) using Angular and hosting it on Github, I encountered several issues due to my lack of knowledge in SEO (Search Engine Optimization). One of them was a case where a request for indexing a specific URL on Google Search Console was rejected due to a redirection error.

 At first, I didn't understand what this meant, so I left it alone. However, since the issue persisted, I clicked on the "Learn more" link and found the following guidance.

 The message suggested using Lighthouse to investigate the redirection issue, so I clicked on Lighthouse.

 It turned out to be one of the developer tools in the Chrome browser that I had overlooked. By pressing F12 in the Chrome browser to open the developer tools panel, selecting the Lighthouse tab, and clicking the "Analyze page load" button, it automatically analyzes and provides results. Therefore, I will skip the detailed explanation of how to use the Lighthouse tool.

 When I analyzed the actual page with the redirection error using Lighthouse in my Chrome browser, it pointed out the redirection issue. The main cause of this problem was that while hosting the Angular app on Github, the Github server always appended a slash (/) to the end of the URL when navigating to a specific URL. This caused the Angular router to redirect URLs with trailing slashes to URLs without slashes.

Solution (Based on Angular 19)

1. Create custom-url-serializer.ts file.

Create a custom-url-serializer.ts file anywhere with the following code.

import { UrlTree, DefaultUrlSerializer } from '@angular/router';

export class CustomUrlSerializer extends DefaultUrlSerializer {
    override serialize(urlTree: UrlTree): string {
        return this.appendTrailingSlash(super.serialize(urlTree));
    }

    private appendTrailingSlash(url: string): string {
        const splitOn = url.indexOf('?') > -1 ? '?' : '#';
        const pathArr = url.split(splitOn);

        if (!pathArr[0].endsWith('/')) {
            let fileName: string = url.substring(url.lastIndexOf('/') + 1);
            if (fileName.indexOf('.') === -1) {
                pathArr[0] += '/';
            }
        }

        return pathArr.join(splitOn);
    }
}

[Code Source]: https://github.com/angular/angular/issues/16051#issuecomment-575346573

2. Modify app.config.ts

...
import { CustomUrlSerializer } from './ts-libs/custom-url-serializer';

export const appConfig: ApplicationConfig = {
    providers: [
        { provide: UrlSerializer, useClass: CustomUrlSerializer },
        ...
    ],
};

 By applying CustomUrlSerializer, the URL will always end with a slash (/), and the issue of loading the same page twice due to redirection will be resolved.

 Additionally, Angular provides a function to remove the trailing slash when processing URLs.

import { Location } from '@angular/common';

export class BlaBlaComponent implements OnInit {
    constructor(
        private router: Router,
    ) {
    
    ...
    const url = Location.stripTrailingSlash(this.router.url);
    ...
    
    }
}

 I hope this helps those who are hosting web apps with Angular SPA on Github and experiencing redirection issues.