Angular - injection tokens & Custom libraries

Injection Tokens &
Custom Libraries

About mySelf
• Experienced FE developer, specialised in B2C applications
• FE trainer & lecturer @ 500Tech
• Weekends FE developer @ fashbash.co

Let’s build a strong Angular
community together!!

Talk Objective - logger package

● Who can be installed easily by NPM
● Should be reusable across many applications
● Who can log any http request from our http client
● Each application should have different log prefix
● Safe to use at compile time

DI
Angular libs
Injection Tokens
Module With Providers

The pack your code into a NPM
package, and reuse it within other
projects

@NgModule({
declarations: [...],
imports: [
AngularFireModule.initializeApp({
apiKey: “<YOUR API KEY>",
authDomain: “<AUTH DOMAIN>",
databaseURL: “<DB URL>",
projectId: “<PROJECT ID>",
storageBucket: “<STORAGE BUCKET>",
messagingSenderId: “<MESSAGING ID>"
}),
],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule { }

ng-packger
● Library generator
● Configure for testing and building
the Module out of the box
● Started as an open source 
project, now -> Angular CLI

Why we need Dependency Injection?

Separate the concept of depending
on something from the knowledge of
how to construct it

`
Decoupling Reuse Testing
Why we need Dependency Injection?

What can’t be injected?
● Primitives - strings, numbers etc…
● Interfaces - objects
● Functions
● Observables

Tokens
● Key Which identifies a value to injected
● Not have to be declared at build time, Must exist at
runtime

InjectionToken<T>
● The key to allow us to inject the reference of an
arbitrated type
● In simple words - a placeholder to be override, and can
be injected everywhere you want!

Create our own Injection Token
export const loggerConfig = new InjectionToken<LoggerConfig>('Config for
logger interceptor');
constructor(@Inject(loggerConfig) private config: LoggerConfig) { }

How we can provide the run time
value to the Injection Token?
Providers!

Provide the value
useClass
@NgModule({
declarations: [],
imports: [
],
providers: [ {provide: LoggerService, useClass: LoggerService}],
exports: [LoggerComponent]
})

Provide the value
useClass - syntactic sugar
@NgModule({
declarations: [],
imports: [
],
providers: [LoggerService],
})

Provide the value
useValue
@NgModule({
declarations: [],
imports: [
],
providers: [{ provide: loggerConfig, useValue: {appName: 'APP1'} }],
})

Provide the value
useExisting
@NgModule({
declarations: [],
imports: [
],
providers: [{ provide: LoggerService, useExisting: HttpLoggerService }],
})

Provide the value
useFactory
@NgModule({
declarations: [],
imports: [
],
providers: [{ provide: LoggerService, useFactory: () => {
return new LoggerService();
} }],
})

Multi providers
● We have the ability to provide
multi providers into the same
Token -  
HTTP_INTERCEPTOR,
APP_INITIZALIER
@NgModule({
bootstrap: [AppComponent],
imports: [...],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
},
{
provide: HTTP_INTERCEPTORS,
useClass: LoggerService,
multi: true
}
]
})

Deps (dependencies)
● Sometimes providers
depends on other
providers to get
instantiated.
@NgModule({
declarations: [],
imports: [
],
providers: [
{
provide: APP_INITIALIZER,
useFactory: init_app,
deps: [AppInitService],
multi: true
},
],
})

@Optional
● DI climbing up the tree and looking for the instance
of the token we Injected
● If no instance provided -> No provider for exception
constructor(@Optional() @Inject(loggerConfig)
private config: LoggerConfig) { }

Now…we know how to provide the
value to our tokens…
How the end-user should  
know this tokens exists?
BUT

ModuleWithProviders
● Static function inside the module that can get
parameters
● Return ngModule but controlling the providers

ModuleWithProviders - Angular Router
export class RouterModule {
static forRoot(routes: Routes, config?: ExtraOptions):
ModuleWithProviders<RouterModule> {
return {
ngModule: RouterModule,
providers: [
...
],
};
}
}

Test, build and deploy you lib
ng build *lib-name*
ng test *lib-name*
cd dist/*lib-name*
npm version major/minor/patch
npm login
npm publish

Thank You
@EliranEliassy eliran.eliassy@gmail.comeliraneliassy

Angular - injection tokens & Custom libraries

More Related Content

What's hot

More from Eliran Eliassy

Recently uploaded

Angular - injection tokens & Custom libraries