javascript - Avoid Multiple Instances of Service in Angular - Stack Overflow

admin管理员组

文章数量:1355574

I have done some research on the net, and I have figured out that the problem I am facing is that multiple instances of service are being created, and I want to avoid that. Can some one please look at my code and spot the change I need to make.

Second service that uses the primary service that is being duplicated.

export class SecondaryService {
    constructor(private primarySvc: IPrimaryService){
        this.primarySvc.someSubject.subscribe(() => {});
    }
}

Primary Service (the one that is being duplicated)

export class PrimaryService {
    someSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    constructor(){}
}

Primary Service Provider

@Injectable()
export class PrimaryServiceProvider extends PrimaryService {
     constructor(){
          super();
     }
}

Secondary Service Provider

@Injectable()
export class SecondaryServiceProvider extends SecondaryService {
    constructor(private PrimaryProvider: PrimaryServiceProvider){
        super(PrimaryProvider);
    }
}

app.module.ts

 @NgModule({
     declaration: [SecondaryComponent],
     exports: [SecondaryComponent],
     imports: [BrowserModule],
     providers: [SecondaryServiceProvider, PrimaryServiceProvider ]
 })
 export class SearchModule{}

Now I am trying to use the ponent I made in a local environment which looks something like this:

app.module.ts

 @NgModule({
     declaration: [AppComponent, HomeComponent],
     imports: [SearchModule, BrowserModule],
     providers: [PrimaryServiceProvider, SecondaryServiceProvider],
     bootstrap: [AppComponent]
 })
 export class AppModule{}

homeponent.ts

export class HomeComponent {
    constructor( primarySvc: PrimaryServiceProvider, 
        secondarySvc: SecondaryServiceProvider) {
        this.primarySvc.someSubject.next(false);
    }
}

Now I know for sure the Primary Service has two instances since someSubject is not in sync, and the subscribe in SecondarySvc is not fetching any values from homeponent.ts

Please tell me where do i need to make the changes

Thanks!!

I have done some research on the net, and I have figured out that the problem I am facing is that multiple instances of service are being created, and I want to avoid that. Can some one please look at my code and spot the change I need to make.

Second service that uses the primary service that is being duplicated.

export class SecondaryService {
    constructor(private primarySvc: IPrimaryService){
        this.primarySvc.someSubject.subscribe(() => {});
    }
}

Primary Service (the one that is being duplicated)

export class PrimaryService {
    someSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    constructor(){}
}

Primary Service Provider

@Injectable()
export class PrimaryServiceProvider extends PrimaryService {
     constructor(){
          super();
     }
}

Secondary Service Provider

@Injectable()
export class SecondaryServiceProvider extends SecondaryService {
    constructor(private PrimaryProvider: PrimaryServiceProvider){
        super(PrimaryProvider);
    }
}

app.module.ts

 @NgModule({
     declaration: [SecondaryComponent],
     exports: [SecondaryComponent],
     imports: [BrowserModule],
     providers: [SecondaryServiceProvider, PrimaryServiceProvider ]
 })
 export class SearchModule{}

Now I am trying to use the ponent I made in a local environment which looks something like this:

app.module.ts

 @NgModule({
     declaration: [AppComponent, HomeComponent],
     imports: [SearchModule, BrowserModule],
     providers: [PrimaryServiceProvider, SecondaryServiceProvider],
     bootstrap: [AppComponent]
 })
 export class AppModule{}

home.ponent.ts

export class HomeComponent {
    constructor( primarySvc: PrimaryServiceProvider, 
        secondarySvc: SecondaryServiceProvider) {
        this.primarySvc.someSubject.next(false);
    }
}

Now I know for sure the Primary Service has two instances since someSubject is not in sync, and the subscribe in SecondarySvc is not fetching any values from home.ponent.ts

Please tell me where do i need to make the changes

Thanks!!

• javascript
• angular
• typescript
• angular6
• singleton

Share Improve this question Follow asked Jul 2, 2020 at 22:26 javan.rajpopatjavan.rajpopat 14711 silver badge1616 bronze badges 3

• Could you run the app on stackblitz. – Diako Sharifi Commented Jul 5, 2020 at 21:43
• Remove providers from SearchModule – yurzui Commented Jul 6, 2020 at 2:33
• @DiakoAmir unfortunately i dont know how to make a local environment in stackblitz., I feel without which I wouldn't be able to re-create the problem – javan.rajpopat Commented Jul 6, 2020 at 16:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Answering my own Question:

The services were duplicated due to incorrect file path while importing. Windows lets you use case-insensitive file paths, which may create multiple instances for every time the module is used.

I think you are overengineering using the PrimaryServiceProvider and SecondaryServiceProvider services.

To create a singleton service just set providedIn: 'root' option in the Injectable decorator, like this:

@Injectable({ providedIn: 'root' })
export class SecondaryService {}

At last, be sure to not register a singleton service at any providers array.

Check out the official documentation about this here.

本文标签： javascriptAvoid Multiple Instances of Service in AngularStack Overflow