Angular 2 Global Constants Provider Injector Method

Question

I have a global constants like root directory that I want every component to have access to. In another stackoverflow question the answer was to create a constants class and import that to every component.

Is there a way to bootstrap a constants class so that every component in the app has access to it without any additional importing?

I have this so far but it is not working, how do I boostrap the constants class and then access then in my components?

constants.ts

export class Constants{
  root_dir: string;

  constructor(){
      this.root_dir = 'http://google.com/'
    }
  }

main.ts

import {bootstrap} from 'angular2/platform/browser'
import {Constants} from './constants'

bootstrap([
  provide(Constants, {useClass: Constants})
]);

random.component.ts

import {Component, bind} from 'angular2/core';
import {Injector} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `{{test}}`
})

export class RandomComponent{
    test: string;

    constructor(){
        this.test = injector.get(Constants.root_dir);
    }
}

Solution 1

To answer your questions:

• All components using the Constants class will need to import your constants file.

• In order to use the Constants class you need to inject it into the constructor of any consuming components, removing the injector.get() function from random.component.ts like so:

export class App {
  constructor(constants: Constants) {
    this.url = constants.root_dir;
  }
}

You may also decorate your constant class as an @Injectable and @Inject it into the constructor of your component.

Here is a working plunker.

It is beneficial to bootstrap the shared constants at the app level so that only one instance of the class is created and shared among all components.

Solution 2

import {Component,bind,provide} from 'angular2/core';

import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';
import {Directive, ElementRef, Renderer, Input,ViewChild,AfterViewInit} from 'angular2/core';
import {Constants} from 'src/constants'
import {ViewChild, Component, Injectable} from 'angular2/core';

@Component({
selector: 'my-app', 
  template: `{{test}}`,
})


export class App {
    test: string;

    constructor(cs:Constants){
        this.test = cs.root_dir;
    }
}

bootstrap(App, [Constants]);

Demo

Comments

[Angel Angel]

I'm new to Angular2 is not if the above is the best way to get what you want, I hope it will help