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 Talk Objective - logger package

Talk Objective - logger package 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], exports: [LoggerComponent] })

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

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

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

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 }, ], exports: [LoggerComponent] })

@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

Similar to Angular - injection tokens & Custom libraries

More from Eliran Eliassy

Recently uploaded

Angular - injection tokens & Custom libraries