Dependency Injection in Angular

Philipp Huber

What do you already know about Dependency Injection in Angular?

Where to provide dependencies?

How to provide dependencies (1/2)

  • @Injectable()
  • 
                        @Injectable({providedIn: 'root'})
                        export class Service {..}
                    
    @Injectable({
      providedIn: 'root',
      useFactory: () => new MusicService('dependency'),
    })
                    
  • useClass
  • 
                        [{ provide: Logger, useClass: TimestampedLogger }],
                        [Logger]
  • useExisting
  • 
                        [{ provide: Logger, useClass: TimestampedLogger },
                         { provide: BasicLogger, useExisting: Logger}]

How to provide dependencies (2/2)

  • useValue
  • export function SilentLoggerFn() {}
    const silentLogger = {
      logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'],
      log: SilentLoggerFn
    };
    [{ provide: Logger, useValue: silentLogger }]
  • useFactory
  • 
                        [{ provide: MusicService,
                          useFactory: musicServiceFactory,
                          deps: [Logger, UserService]}]

What is the injection tree?

ModuleInjector & ElementInjector

dependency-hierarchy
dependency-hierarchy
dependency-hierarchy
dependency-hierarchy
dependency-hierarchy
dependency-hierarchy
dependency-hierarchy
dependency-hierarchy
dependency-hierarchy
dependency-hierarchy

How does Angular resolve tokens?

What is the difference between providers and viewProviders?

What are resolution modifiers and how do they work?

  • @Optional()
  • @Self()
  • @Host()
  • @SkipSelf()

What about lazy-loaded modules?