如何有条件地禁用客户端

Question

I have a server-side rendered app (with transition) and I have a 404 page that I've put in a lazy module (so I don't increase loaded Javascript size).

This is working fine, but there is some flickering when the client side takes over, which I think is due to the JS chunk loading after the main chunk has finished loading.

Given this page only contains static links and one routerLink , the client side is not needed at all and I'm wondering if there's a way to disable the client side on certain URLs

Edit: as suggested in the comments I tried to conditionally bootstrap the application. I can't use the URL as a condition because the server responds 404 on the non-existing URL (there is no redirect at this point). So the most appropriated thing to use is the TransferState which i successfully set up on server side and it generates some output just before the closing body tag.

Unfortunately I didn't find any way to properly instantiate TransferState in main.ts because it's supposed to be imported via BrowserTransferStateModule and I see no possible way to import an Angular module in the main.ts file.

I tried to instantiate it directly with the initTransferState function but it appears it's not designed to be used outside the module since i get an error :

ERROR in ./src/main.ts
Module not found: Error: Can't resolve '@angular/platform-browser/src/browser/transfer_state' in 'G:\Documents\Projets\Myapp\Sources\master\frontend\src'

Any idea other than doing some dirty deserialization?

Answer 1

I think this is what you are looking for:

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

export class MyComponent implements OnInit{
    constructor(@Inject(PLATFORM_ID) private platform: any) { }

    ngOnInit() {
        if (isPlatformBrowser(this.platform)) {
            // use clientside stuff
        }
    }
}