How to access a constant in an Angular 2 component and service?

I have a constants file constants.ts:

export const C0NST = "constant";


I access it in a service some.service.ts like so:

import { C0NST } from './constants';

console.log(C0NST); // "constant"


However, when I access it in a component template:

some.component.ts:

import { C0NST } from './constants';


some.component.html:

{{ C0NST }} <!-- Outputs nothing -->


However defining a member in the component class works:

some.component.ts

public const constant = C0NST;


some.component.html

{{ constant }} <!-- constant -->


I don't understand why I was able to access the imported constant directly in the service class but not in the component template even though I imported it in the component class.

Continue reading...