Creating an interface for an Angular 6 service

Question

Creating an interface for an Angular 6 service

I'm currently working on a project using Angular (6.0.7) and I am in the process of creating a service using the new:

@Injectable({
  providedIn: 'root'
})

My question is, how can I specify an interface for dependency injection?

The issue at hand

In my project, I have two services - Authentication.service and SessionStorage.service. I want to inject the session storage service into the authentication service. This can be achieved like this:

constructor(private sessionStorage: SessionStorage) {
}

However, I want to define an interface above these services (to allow for implementing both local storage service and session storage service). Therefore, it makes sense to type the injected class with the interface. Unfortunately, Angular 6 does not support this feature in the same way as Angular 5 and earlier versions.

So, how can I assign a type to the injected class in this global service using my interface?

What I've attempted so far

The typings for Angular services include an InjectableProvider, but it doesn't align with any parameters of the siblings of InjectableProvider, leading to compiler and tslint errors.

@Injectable({
  providedIn: 'root'
}, {provide: IStorageService, useClass: SessionStorage})

angular typescript service dependency-injection angular6

Answer 1

Answer №1

To achieve this functionality, utilize the InjectionToken instead of the outdated OpaqueToken

export const AuthenticationProvider = new InjectionToken(
  "AuthenticationProvider",
  { providedIn: "root", factory: () => new CognitoAuthenticationProvider() }
);

...

@Injectable()
export class CognitoAuthenticationProvider implements IAuthenticationProvider {

...

@Injectable({
  providedIn: "root"
})
export class AuthenticationService {
  constructor(
    @Inject(AuthenticationProvider)
    private authenticationProvider: IAuthenticationProvider,
    private http: HttpClient
  ) {}

Answer 2

To achieve this functionality, utilize the InjectionToken instead of the outdated OpaqueToken

export const AuthenticationProvider = new InjectionToken(
  "AuthenticationProvider",
  { providedIn: "root", factory: () => new CognitoAuthenticationProvider() }
);

...

@Injectable()
export class CognitoAuthenticationProvider implements IAuthenticationProvider {

...

@Injectable({
  providedIn: "root"
})
export class AuthenticationService {
  constructor(
    @Inject(AuthenticationProvider)
    private authenticationProvider: IAuthenticationProvider,
    private http: HttpClient
  ) {}

Answer 3

Answer №2

In order to address this challenge, I utilized the following approach:

app.module.ts

providers: [
  { provide: CustomInterface, useClass: environment.instance }
  ...
]

CustomInterface.ts

export abstract class CustomInterface {
   abstract customMethod();
}

MyImplementation1.ts

export class MyImplementation1 implements CustomInterface {
   customMethod() { ... }; // implementation
}

export class MyImplementation2 implements CustomInterface {
   customMethod() { ... }; // implementation
}

environment.ts

export const environment = {
  production: false,
  instance: MyImplementation2
};

environment.prod.ts

export const environment = {
  production: true,
  instance: MyImplementation1
};

Answer 4

In order to address this challenge, I utilized the following approach:

app.module.ts

providers: [
  { provide: CustomInterface, useClass: environment.instance }
  ...
]

CustomInterface.ts

export abstract class CustomInterface {
   abstract customMethod();
}

MyImplementation1.ts

export class MyImplementation1 implements CustomInterface {
   customMethod() { ... }; // implementation
}

export class MyImplementation2 implements CustomInterface {
   customMethod() { ... }; // implementation
}

environment.ts

export const environment = {
  production: false,
  instance: MyImplementation2
};

environment.prod.ts

export const environment = {
  production: true,
  instance: MyImplementation1
};

Answer 5

Answer №3

Utilizing typescript interfaces for dependency injection may not be possible as typescript interfaces do not persist during runtime, serving solely for type safety at compile time.
To address this limitation, utilizing an abstract class is recommended.

UPDATE: It appears that the useClass should be used as the first parameter in @Injectable, rather than the second position as demonstrated in your example. By incorporating this with @k0zakinio's solution results in:

@Injectable({
  providedIn: 'root',
  useClass: environment.concrete,
  deps: []
})
export abstract class SessionStorage { }

Additionally, it seems necessary to declare dependencies using deps or inject, refer to this github issue. Hopefully, this revised answer proves to be more helpful.

Answer 6

Utilizing typescript interfaces for dependency injection may not be possible as typescript interfaces do not persist during runtime, serving solely for type safety at compile time.
To address this limitation, utilizing an abstract class is recommended.

UPDATE: It appears that the useClass should be used as the first parameter in @Injectable, rather than the second position as demonstrated in your example. By incorporating this with @k0zakinio's solution results in:

@Injectable({
  providedIn: 'root',
  useClass: environment.concrete,
  deps: []
})
export abstract class SessionStorage { }

Additionally, it seems necessary to declare dependencies using deps or inject, refer to this github issue. Hopefully, this revised answer proves to be more helpful.

Answer 7

Answer №4

One way to accomplish this is by using the following syntax -

[{ type: CustomType, implement: CustomImplementation}]

Answer 8

One way to accomplish this is by using the following syntax -

[{ type: CustomType, implement: CustomImplementation}]

Creating an interface for an Angular 6 service

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Drizzle ORM retrieve unique string that is not a database column

Dropdown element with PrimeNG adorned with a span

Encountering an issue with Angular 8 and Material where a table does not fully render on mobile browsers like Chrome, causing rows to only half

Coordinate tab switching in mat-tab-group with a matching component

Firebase and Nx: Encountering issues with running emulators

What is the process for displaying data within an Angular 10 component?

The utilization of the Angular date pipe significantly impacts the way dates are

Utilizing TypeScript to export a class constructor as a named function

Encountering issues during postinstall when trying to npm install the classlist.js package using

Leveraging the power of ReactJS and TypeScript within a Visual Studio environment for an MVC5 project

The service method call does not occur synchronously

Detecting unutilized space in a collection of divs with varying sizes using JavaScript and CSS

Implementing Dynamic Updates to a Google Sheets Custom Menu using Typescript

What is the best approach to creating a Typescript library that offers maximal compatibility for a wide range

Exploring the process of updating the background color of a specific component in Angular

What is the reason behind typescript making it necessary for me to find a way to set a value of type

Exploring the depths of TypeScript's intricate type validation

Tips for integrating angular signature functionality using fabricjs in the latest version of Angular (Angular 11)

Using Iframe for WooCommerce integration and implementing Facebook login within an Ionic application

Learn how to implement code splitting in a React application with webpack by exporting components using the syntax "export * from '...'"