Angular2 - How to initialize data inside a service?

Question

I have two services. login.service.ts and environment-specific.service.ts.

In login.service.ts I need to initialize a Json object from environment-specific.service.ts which passes a couple of links.

The use case is how to make this working in the servcie without ngOnInit(){}, because ngOnInit() can't be used within a servcie as per Angular2 Lifecycle Hook.

Here you find the part I must initialize inside in login.service.ts - of course without ngOnInit() method:

...
import { EnvSpecific } from '../models/env-specific';
import { ActivatedRoute } from "@angular/router";

@Injectable()
export class LoginService {

   link1: string;
   link2: string;
   link3: string;

   constructor(private http: Http, private fbuilder:FormBuilder, private route: ActivatedRoute) { }

   ngOnInit(){
      this.route.data
         .subscribe((data: { envSpecific: EnvSpecific }) => {
            this.link1 = data.envSpecific.link1;
            this.link2 = data.envSpecific.link2;
            this.link3 = data.envSpecific.link3;
      });
   }
   ...
   ...
}

and I would like to pass the link(s) to the URL passed to different http.post API call. e.g:

...
var obsRequest = this.http.post( this.link1, serializedForm, this.options )
...

The Error is clear: link1 is undefined

Any suggestion or a hint please?

@Robin Dijkhof: I tried.. unfortunately didn't work. When I initialize it inside a component, it works fine and I access e.g. link1 which means that the code if fine. Just inside a service it doesn't. — k.vincent
– k.vincent, Commented Aug 10, 2017 at 14:32
Did you try to set link1 to an object in the class member definition? Where you do link1: string;, change it to link1: string = '...';. Also, did you try moving the this.route.subscribe line into your constructor? That way it will be called when the service is instantiated. — Lansana Camara
– Lansana Camara, Commented Aug 10, 2017 at 14:39
@Lansana: I'am not sure if I understand what you exactly mean with the first hint. But regarding the second one, yes I did: constructor(private http: Http, private fbuilder:FormBuilder, private route: ActivatedRoute) { this.route.data .subscribe((data: { envSpecific: EnvSpecific }) => { this.link1 = data.envSpecific.link1; this.link2 = data.envSpecific.link2; this.link3 = data.envSpecific.link3; }); } Error: Cannot read property link1 of undefined` — k.vincent
– k.vincent, Commented Aug 10, 2017 at 14:45
Are you just trying to get a value from your environment file to use in your login service? Why don't you just import the environment variables instead of passing it in from the URL? — Lansana Camara
– Lansana Camara, Commented Aug 10, 2017 at 14:46

Lansana Camara · Accepted Answer · 2017-08-10 15:26:29Z

4

You could move your logic in the ngOnInit in your service to the service's constructor. But even then, the link1 property may not be set immediately, so you may want to provide a default value for it.

But this seems like an antipattern to me. You can just use the native Angular 2 environment that is set up for you by default with Angular CLI.

It has both development/production variants and you can set your values in there however you want, and just import it in your service. Based on the way you do ng build (if you pass -prod flag or not), the different env variables will be used.

answered Aug 10, 2017 at 15:26

Lansana Camara

9,90112 gold badges54 silver badges90 bronze badges

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

1 Comment

k.vincent Over a year ago

I go for the option with Angular2 built-in Env. The one with service constructor doesn't give the expected result.

Mark · Accepted Answer · 2019-10-18 10:43:57Z

4

You can initialized your service at first by app initialization before using of the services.

That can be done with APP_INITIALIZER, see:

https://devblog.dymel.pl/2017/10/17/angular-preload/

Angular: How to correctly implement APP_INITIALIZER

answered Oct 18, 2019 at 10:43

Mark

19k14 gold badges69 silver badges94 bronze badges

Collectives™ on Stack Overflow

Angular2 - How to initialize data inside a service?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related