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?

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?

• javascript
• angular
• typescript
• websocket
• signalr

• 1 configure it on the ponents providers property – Vikas Commented Jun 26, 2018 at 2:34
• @vikas, how can I do this while leverage the Dependency Injector? – johnny 5 Commented Jun 26, 2018 at 2:39
• While reading the question it was looking like something different (as per the question its not easy to understand) that what you actually want! – Prashant Pimpale Commented Jun 26, 2018 at 3:19

2 Answers 2

Use the providers property in the @Component decorator.

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

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

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

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 ponent and it’s children you configure it on the ponents providers property.Non-singleton

Providing services
Angular's Hierarchical Dependency Injection system