Make an Angular module only load in component

Viewed 19

I have an Angular application with SSR (Angular Universal) and I know that everthing related to browser, like window, document, setTimeout... Are not supported by SSR, so I rewrite all of my code to match these criterias and only load browser specific content after confirmation that application is running on a browser.

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

isBrowser: boolean;

constructor(@Inject(PLATFORM_ID) private platformId: any) {
  this.isBrowser = isPlatformBrowser(this.platformId);
}

loadLocalstorage(): void {
  if (this.isBrowser) {...logic here}
}

Question is. I use a library called ng-apexcharts which are not compatible with SSR, so I need to load it after isBrowser confirmation. The problem is this library are loaded by a module NgApexchartsModule and I don't know how I can load a module after that confirmation, because I can't inject PLATFORM_ID into my module that have the component using ngApexcharts.

Is there a way to load a module on component? It can be whatever hierarchy necessary, but I need to make that verification before load it's module.

Probably lazy loading will not be the answer, because I don't want to change route, I just want to load NgApexchartsModule when application confirm that is in a browser

0 Answers
Related