angular - How to use a variable from one module to other module

Question

I am trying to do Server-side rendering in my Angular application using angular universal. The issue is that I have to apply the isPlatformBrowser() function in the routing.module.ts file also (where I need to pass platformId in the parameter).

I have used this method, to implement server-side rendering in other components and service files.

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

@Component({
  selector: 'your-component',
  templateUrl: 'your-component.component.html',
  styleUrls: ['your-component.component.css'],
})
export class YourComponent implements OnInit { 
  constructor(@Inject(PLATFORM_ID) private _platformId: Object) {}

  ngOnInit() {  
    if (isPlatformBrowser(this._platformId)) {
      // here you can access localStorage
    } else {
      // here you are on the server side and localStorage is not available
    }
  }
}

This is my part of app-routing.module.ts where I need to implement server-side rendering

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: isPlatformBrowser(platformId) ? localStorage.getItem('countryCode') : null || 'my'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      onSameUrlNavigation: 'reload'
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

How can I implement server-side rendering in app-routing.module.ts? Can anyone please help me with this issue?

Answer 1

You can try to use a RouteGuard to do the redirect:

@Injectable({
  providedIn: 'root'
})
export class RedirectGuard implements CanActivate {
  constructor(@Inject(PLATFORM_ID) private _platformId: Object, private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (isPlatformBrowser(this._platformId)) {
      const path = localStorage.getItem('countryCode');
      return this.router.parseUrl(path);
    } else {
      return this.router.parseUrl('/my');
    }
  }
}

And change your routes to this:

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    canActivate: [RedirectGuard]
  }
];