Passing Initialization Data to Angular 2

Question

Does anyone know a way that I can pass initialization data into an Angular 2 application built with Angular CLI? I need to pass Access Token that I currently have from a pre-authenticated .NET backend so that I can call an API.

I've tried to do this via a local web api endpoint, but since Observables are async, the module tries to use the value before it's available in the app.

I've already tried the OnRun suggestion by @Ben Nadel Here. The result of my http call still happens AFTER the app is loaded causing my access token to be null when it first is loaded.

Something like @Bilyachat suggested below would work great! Where I could simply do something like the following:

<app-root [apiKey]="1234567890xxxxx"></app-root>

Any help would be awesome... Thanks.

Answer 1

If you use {}, an explicit return is required in return config.load();

  useFactory: (config: AppConfig) => () => {
    return config.load();
  },

Plunker example

Answer 2

If you have angular app on MVC page then i see two options

First In angular root component attribute (In first suggestion i told you to use input parameters, but problem is that root component is "Out of angular" and it will not be able to read parameters the only way is to read attributes manually)

import {Component, NgModule, Input, ElementRef} from '@angular/core'
export class App {
   myConfig: any;
  constructor(element: ElementRef) {
    this.myConfig = element.nativeElement.getAttribute('data-config'); 
  }

}

Then when you print you can do like this

<app-root data-config="valueGoeshere"></app-root>

Updated plnkr

Second

Print on mvc page

var yourAppMvcConfig= {
    configValue: 'DO_PRINT_HERE'
};

add into src/typings.d.ts (If its missing add it)

declare var yourAppMvcConfig: {
    configValue: string;
}

Use in Angular

yourAppMvcConfig.configValue