The battle of environmental impact versus utility value in the realm of constants

Question

Imagine having a collection of links that you want to organize in a separate file like this:

export const SITE_LINKS = [
   { text: 'About', path: '/about' },
   { text: 'Projects', path: '/projects}
]

You plan to utilize these links in 2 different places: header.component.ts and footer.component.ts

<ul>
  <li *ngFor="let link of links">
    <a [routeLink]="link.path">{{ link.text }}</a>
  </li>
</ul>

What is the recommended approach for adding constants in Angular?

There are two main methods that can be used:

export const environment = {
  production: false,
  siteLinks: SITE_LINKS
};

const siteLinks = new InjectionToken<string[]>('site links')

providers: [
  { provide: siteLinks: useValue: SITE_LINKS }
]

I'm interested in knowing which approach is more preferable and in what scenarios one should be chosen over the other?

Answer 1

Answer №1

environment.ts

This file is best used for storing constants related to important credentials or configurations such as API endpoints, app IDs, keys, and other changing variables in different environments.
Variables that need to be adjusted when switching between environments like dev, prod, test.
It may not be appropriate to include the SITE_LINKS here as these items are likely to remain consistent across all environments.

Providers

Alternative

If the SITE_LINKS are only meant for header and footer components within the /shared folder, consider creating a separate directory like /constants to store common constant data. This allows for easy importing of paths directly into the components where they will be used.

/constants
  site-links.constant.ts

Answer 2

environment.ts

This file is best used for storing constants related to important credentials or configurations such as API endpoints, app IDs, keys, and other changing variables in different environments.
Variables that need to be adjusted when switching between environments like dev, prod, test.
It may not be appropriate to include the SITE_LINKS here as these items are likely to remain consistent across all environments.

Providers

Alternative

If the SITE_LINKS are only meant for header and footer components within the /shared folder, consider creating a separate directory like /constants to store common constant data. This allows for easy importing of paths directly into the components where they will be used.

/constants
  site-links.constant.ts