CODEWITHSUNDEEP
angular
user6650906
user6650906

Reputation:

Angular 4 - Unable to share the data between components via services

I'm trying to setup the config properties for my Angular 4 application when the application loads using the APP_INITIALIZER as below and setting the properties to a service and trying to inject that service in other components where ever I need the properties but the value is always empty.

Stackblitz Link

app.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { EnvironmentService } from './config.service';
import { HttpClientModule } from '@angular/common/http';

export const appInitializerFn = (env: EnvironmentService) => {
    return () => {
        console.log('inside appinitfn');
//call profiles abn send enc to 

        return env.setEnvironment('dev');
    };
};

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
        EnvironmentService,
        {
            provide: APP_INITIALIZER,
            useFactory: appInitializerFn,
            multi: true,
            deps: [EnvironmentService]
        }
    ]
})
export class AppModule { }

config.service.ts 

    import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable()
export class EnvironmentService {

    private environment = {};

    constructor(private http: HttpClient) { }

    getEnvironment() {
        return this.environment;
    }

    setEnvironment(env) {
        this.environment={
          test:true
        }
    }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { EnvironmentService } from './config.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [EnvironmentService]
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
  constructor(private env: EnvironmentService) {}
  ngOnInit() {
    let a = this.env.getEnvironment();
    console.log(a); // Getting null
  }
}

Upvotes: 1

Views: 57

Answers (2)

Antoniossss
Antoniossss

Reputation: 32507

its because you have multiple instances of your service while you expect singleton. Remove providers: [EnvironmentService] from @Component.

Upvotes: 0

Koushik Ravulapelli
Koushik Ravulapelli

Reputation: 1138

You are declaring the EnvironmentService both in app.component.ts and app.module.ts, remove the providers in the component and try. 

     import { Component, OnInit } from '@angular/core';
import { EnvironmentService } from './config.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
//  providers: [EnvironmentService]  ==> remove this
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
  constructor(private env: EnvironmentService) {}
  ngOnInit() {
    let a = this.env.getEnvironment();
    console.log(a); // Getting null
  }
}

Upvotes: 1

Related Questions