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.

"but I run into the async problem again." please post the code and explain what problem you run into. — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 22, 2017 at 6:51
I've updated the question. Basically, I need that API key to start with to do any of the pages in a secured application. I already have the key from the server and need a way to pass it to the app. — Mike Kushner
– Mike Kushner, Commented Feb 22, 2017 at 14:21
I don't see anything about OnRun. What code did you use, what problem did it cause? — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 22, 2017 at 14:22
I tried to initialize a user configuration via an http api endpoint by following Ben Nadel's instructions on [bennadel.com/blog/… the classes OnRun methods are called, but since they are async, the APIKey comes in AFTER I need it in my application. I can't paste the code for some reason. — Mike Kushner
– Mike Kushner, Commented Feb 22, 2017 at 14:30
I got that. Without seeing the exact code you were using, I can't tell what's wrong with the code. See also stackoverflow.com/questions/37611549/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 22, 2017 at 14:33

Günter Zöchbauer · Accepted Answer · 2017-02-23 07:37:39Z

3

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

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

Plunker example

answered Feb 23, 2017 at 7:37

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

crh225 Over a year ago

Hi Gunter, is it possible to have two app Initializers and the second initializer waits untill the first one gets completed? I have a config service that returns all the urls for my app that runs APP_INITIALIZER. I also have a localizaiton module and provider that cannot be loaded until the first config for the localization has ran which contains an api endpoint returned from the config service.

Günter Zöchbauer Over a year ago

I don't think so, but you can combine them into a single one and wire them up so the 2nd waits for the first

crh225 Over a year ago

That is what I ended up doing. Thank you for your strong angular support. I know the community appreciates it!

Vova Bilyachat · Accepted Answer · 2017-02-22 21:13:27Z

1

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

edited Feb 22, 2017 at 21:13

answered Feb 21, 2017 at 23:23

Vova Bilyachat

19.5k4 gold badges60 silver badges88 bronze badges

5 Comments

Mike Kushner Over a year ago

Thanks Volodymyr, I tried to do your first suggestion and couldn't get it to work. I made a Plunkr for it Here to show you.

Mike Kushner Over a year ago

And Typings.d.ts don't exist in new CLI projects. Some say they are deprecated while googling.

Mike Kushner Over a year ago

Love it... I got it working both ways now... Your first way is very much cleaner, IMO, compared to using APP_INITIALIZER when bootstrapping. Especially since I already have the values to just throw in it. Thanks to all.

Vova Bilyachat Over a year ago

@MikeKushner It always good to know two ways :) because some times there could be cases where you can use one or another :) or both together

Samuel Over a year ago

@VovaBilyachat : Can you please take a look at stackoverflow.com/questions/66785098/… . I would really really appreciate your guidance

paul · Accepted Answer · 2017-02-22 14:29:55Z

0

"the module tries to use the value before it's available in the app" - I think this is your problem.

Instead delaying the loading of the page until the call with your token has returned, why don't you write code that doesn't make any calls until the token has returned?

ngOnInit() {
    this.tokenService.getToken().subscribe((token) => {
        console.log('now I have a token, and am ready to make my calls', token);

        this.secureService.getSecureDataUsingToken(token).subscribe((result) => {
            console.log('here is the result of the authenticated call', result);
        }
    });
}

answered Feb 22, 2017 at 14:29

paul

22.1k1 gold badge56 silver badges54 bronze badges

2 Comments

Mike Kushner Over a year ago

You're absolutely correct @paul, that would work, except I would have to repeat that logic on every component that uses a secureService.xxxMethod method. Still looking for a way to get that key right off the bat and use it at the service level rather than on the container level if possible.

Samuel Over a year ago

Can you please take a look at stackoverflow.com/questions/66785098/… . I would really really appreciate your guidance

darrisb · Accepted Answer · 2017-10-03 10:35:23Z

0

Here is a solution I found. Your index.html file right where angular starts to load your script files. you can add the following line:

<script type="text/javascript">localStorage.setItem("title", "<?php echo $title; ?>")</script>

This will place the data in localstorage on the client an you can retrieve inside your application. I was using php trying to initialize some content in an opencart store. this is a good way to pass the data in. If you are passing in a JSON you need to json.stringfy before you pass in. When you retrieve it from withing the application you need do json.parse

edited Oct 3, 2017 at 10:35

answered Oct 3, 2017 at 9:44

darrisb

113 bronze badges

Collectives™ on Stack Overflow

Passing Initialization Data to Angular 2

4 Answers 4

3 Comments

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related