Multi-provider pattern in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the output of this Angular component using multi-provider pattern?

Consider this Angular service and component setup using multi-provider pattern. What will the component display?

Angular

import { Component, Inject, InjectionToken } from '@angular/core';

export interface Logger {
  log(message: string): string;
}

export const LOGGER_TOKEN = new InjectionToken<Logger>('LOGGER_TOKEN');

export class ConsoleLogger implements Logger {
  log(message: string): string {
    return `ConsoleLogger: ${message}`;
  }
}

export class FileLogger implements Logger {
  log(message: string): string {
    return `FileLogger: ${message}`;
  }
}

@Component({
  selector: 'app-log-display',
  template: `<div>{{logs.join(' | ')}}</div>`,
  providers: [
    { provide: LOGGER_TOKEN, useClass: ConsoleLogger, multi: true },
    { provide: LOGGER_TOKEN, useClass: FileLogger, multi: true }
  ]
})
export class LogDisplayComponent {
  logs: string[] = [];
  constructor(@Inject(LOGGER_TOKEN) private loggers: Logger[]) {
    this.logs = this.loggers.map(logger => logger.log('Test'));
  }
}

A ConsoleLogger: Test

B ConsoleLogger: Test | FileLogger: Test

C FileLogger: Test

D Error: No provider for LOGGER_TOKEN

💡 Hint

Remember that multi: true allows multiple providers to be injected as an array.

Using multi: true for the same token registers multiple providers. Angular injects an array of all provided instances. So both ConsoleLogger and FileLogger are injected, and their log methods are called, producing both messages joined by ' | '.

📝 Syntax

intermediate

Which option correctly registers multiple providers for the same token in Angular?

Choose the correct syntax to register two classes as multi-providers for the same injection token.

Angular

import { InjectionToken } from '@angular/core';

export const MY_TOKEN = new InjectionToken<string>('MY_TOKEN');

export class ServiceA {}
export class ServiceB {}

A { provide: MY_TOKEN, useClass: ServiceA, multi: true }, { provide: MY_TOKEN, useClass: ServiceB, multi: true }

B { provide: MY_TOKEN, useClass: ServiceA }, { provide: MY_TOKEN, useClass: ServiceB }

C { provide: MY_TOKEN, useClass: ServiceA, multi: false }, { provide: MY_TOKEN, useClass: ServiceB, multi: false }

D { provide: MY_TOKEN, useClass: ServiceA, multi: true }, { provide: MY_TOKEN, useClass: ServiceB }

💡 Hint

Multi-providers require multi: true on all provider entries.

To register multiple providers for the same token, each provider must have multi: true. Otherwise, Angular will override previous providers or throw errors.

🔧 Debug

advanced

Why does this Angular multi-provider injection cause a runtime error?

Given this provider setup, the app crashes with 'NullInjectorError: No provider for LOGGER_TOKEN!'. What is the cause?

Angular

import { Component, Inject, InjectionToken } from '@angular/core';

export interface Logger {
  log(message: string): string;
}

export class ConsoleLogger implements Logger {
  log(message: string): string {
    return `ConsoleLogger: ${message}`;
  }
}

export const LOGGER_TOKEN = new InjectionToken<Logger>('LOGGER_TOKEN');

@Component({
  selector: 'app-root',
  template: `<app-log-display></app-log-display>`,
  providers: [
    { provide: LOGGER_TOKEN, useClass: ConsoleLogger, multi: true }
  ]
})
export class AppComponent {}

@Component({
  selector: 'app-log-display',
  template: `<div>{{logs}}</div>`
})
export class LogDisplayComponent {
  logs: string = '';
  constructor(@Inject(LOGGER_TOKEN) private loggers: Logger[]) {
    this.logs = loggers.map(l => l.log('Hi')).join(', ');
  }
}

A LOGGER_TOKEN is not provided in a shared or parent injector accessible to LogDisplayComponent

B LogDisplayComponent is not declared in the same module as AppComponent

C LogDisplayComponent does not have providers array with LOGGER_TOKEN multi-provider

D Multi-provider tokens cannot be injected as arrays

💡 Hint

Consider Angular's hierarchical injectors and where providers are declared.

The multi-provider for LOGGER_TOKEN is declared only in AppComponent's providers. If LogDisplayComponent is used inside AppComponent's template, it inherits that injector. But if LogDisplayComponent is used elsewhere or lazy loaded, it may not see that provider. The error means the injector hierarchy does not have LOGGER_TOKEN provider accessible to LogDisplayComponent.

🧠 Conceptual

advanced

What is the main benefit of using Angular's multi-provider pattern?

Why would a developer choose to use the multi-provider pattern in Angular dependency injection?

A To improve performance by caching a single instance of a service

B To override existing providers with a new single provider for the token

C To allow multiple classes to be injected as an array for the same token, enabling extensible service collections

D To automatically lazy load services only when needed

💡 Hint

Think about scenarios where you want many implementations under one token.

Multi-provider pattern allows registering multiple providers for the same token. Angular injects them as an array. This is useful for plugins, logging, or extensible features where many implementations coexist.

❓ state_output

expert

What is the value of 'logs' after this Angular component runs with multi-provider pattern?

Analyze the following Angular component using multi-provider pattern. What is the final value of the logs array?

Angular

import { Component, Inject, InjectionToken } from '@angular/core';

export interface Logger {
  log(message: string): string;
}

export const LOGGER_TOKEN = new InjectionToken<Logger>('LOGGER_TOKEN');

export class LoggerA implements Logger {
  log(message: string): string {
    return `A:${message}`;
  }
}

export class LoggerB implements Logger {
  log(message: string): string {
    return `B:${message}`;
  }
}

@Component({
  selector: 'app-root',
  template: `<div>{{logs.join(',')}}</div>`,
  providers: [
    { provide: LOGGER_TOKEN, useClass: LoggerA, multi: true },
    { provide: LOGGER_TOKEN, useClass: LoggerB, multi: true },
    { provide: LOGGER_TOKEN, useClass: LoggerA, multi: true }
  ]
})
export class AppComponent {
  logs: string[] = [];
  constructor(@Inject(LOGGER_TOKEN) private loggers: Logger[]) {
    this.logs = this.loggers.map(l => l.log('hello'));
  }
}

A []

B ["A:hello", "B:hello"]

C ["B:hello", "A:hello", "B:hello"]

D ["A:hello", "B:hello", "A:hello"]

💡 Hint

Multi-providers accumulate all providers in order of declaration.

All three providers are registered with multi: true for LOGGER_TOKEN. Angular injects an array with all three instances in the order declared. The map calls log('hello') on each, producing ["A:hello", "B:hello", "A:hello"].