Using Static variables in angular router link path

Question

In my angular app, I have a Path file where all the path variables are static like below.

export class PATHS {
    static LOGIN = "login";
    static HOME = "home";
}

In my Layout component I was using them in router link like below

 <li class="nav-item" title="Home">
   <a class="nav-link" routerLinkActive="active" [routerLink]="['/' + PATHS.HOME]"> Home </a>
 </li>

Getting a build error Property 'HOME' is a static member of type 'PATHS'.

This was working in Angular 6 after upgrading to Angular 8 and typescript 3.5

I can fix this by hardcoding the path instead of using it from static variable but this I find a better approach. Any fix?

Answer 1

Please try following.

If your PATHS class is in another directory then import it in your component file like below.

app.component.ts

import { Component } from '@angular/core';
import { PATHS } from 'your path here';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  public Path = PATHS;
}

app.component.html

<li class="nav-item" title="Home">
   <a class="nav-link" routerLinkActive="active" [routerLink]="['/' + Path.HOME]"> Home </a>
</li>