angular 2 transient providers instead of singleton

Question

I have provider which I would like to act as transient instead of a singleton. I know I can create object manually but I would like to still resolve dependencies through the dependency injector.

export class HubServiceBase {

    private readonly hubAuthorizationQueryParameter = 'authToken';

    onCreate = new EventEmitter<any>();
    connectionEstablished = new EventEmitter<Boolean>();
    connectionExists = false;

    private _hubConnection: any;

    constructor(public authManager: AuthenticationProvider) {            
    }

    initialize(hubSubRoute: string): void{
        const accessToken = this.authManager.getRawAccessToken();

        let hubUrl = environment.baseUrl + hubSubRoute;
        if (accessToken) {
            hubUrl += '?' + this.hubAuthorizationQueryParameter +'=' + accessToken;
        }

        this._hubConnection = new HubConnectionBuilder()
                                .withUrl(hubUrl)
                                .build();
    }
//...
}

the initialize function can be called from different services and it maintains a web socket with my server. There can be multiple sockets open running concurrently.

How can I get a new one from the Dependency injector each time a page requests it?

Answer 1

Use the providers property in the @Component decorator.

@Component({
  selector: 'selector-name',
  templateUrl: './template.component.html',
  providers: [ SomeService ]
})

Docs (not great): https://angular.io/api/core/Component

Example: https://stackblitz.com/edit/angular-playground-vewqis?file=app%2Fhello-framework%2Fcomponents%2Fcounter%2Fcounter.component.ts

Answer 2

you can configure injectors in Angular by:

1. providers on NgModule.

2. providers on Components

If you want an instance of a dependency to be shared globally and share state across the application you configure it on the NgModule.-Singleton

If you want a separate instance of a dependency to be shared across each instance of a component and it’s children you configure it on the components providers property.Non-singleton

Providing services
Angular's Hierarchical Dependency Injection system