Angular - injection tokens & Custom libraries
0 likes1,816 views
The document outlines the development of a reusable logger package for Angular applications using dependency injection and various provider configurations. Key concepts covered include creating injection tokens, utilizing NgModule for providers, and the importance of decoupling components for testing and reusability. It provides examples of different provider methods such as useClass, useValue, and useFactory, as well as strategies for managing module dependencies.
![@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 { }](https://image.slidesharecdn.com/angular-injectiontokenslibraries-181128054618/85/Angular-injection-tokens-Custom-libraries-12-320.jpg)
![Provide the value
useClass
@NgModule({
declarations: [],
imports: [
],
providers: [ {provide: LoggerService, useClass: LoggerService}],
exports: [LoggerComponent]
})](https://image.slidesharecdn.com/angular-injectiontokenslibraries-181128054618/85/Angular-injection-tokens-Custom-libraries-23-320.jpg)
![Provide the value
useClass - syntactic sugar
@NgModule({
declarations: [],
imports: [
],
providers: [LoggerService],
exports: [LoggerComponent]
})](https://image.slidesharecdn.com/angular-injectiontokenslibraries-181128054618/85/Angular-injection-tokens-Custom-libraries-24-320.jpg)
![Provide the value
useValue
@NgModule({
declarations: [],
imports: [
],
providers: [{ provide: loggerConfig, useValue: {appName: 'APP1'} }],
exports: [LoggerComponent]
})](https://image.slidesharecdn.com/angular-injectiontokenslibraries-181128054618/85/Angular-injection-tokens-Custom-libraries-25-320.jpg)
![Provide the value
useExisting
@NgModule({
declarations: [],
imports: [
],
providers: [{ provide: LoggerService, useExisting: HttpLoggerService }],
exports: [LoggerComponent]
})](https://image.slidesharecdn.com/angular-injectiontokenslibraries-181128054618/85/Angular-injection-tokens-Custom-libraries-26-320.jpg)
![Provide the value
useFactory
@NgModule({
declarations: [],
imports: [
],
providers: [{ provide: LoggerService, useFactory: () => {
return new LoggerService();
} }],
exports: [LoggerComponent]
})](https://image.slidesharecdn.com/angular-injectiontokenslibraries-181128054618/85/Angular-injection-tokens-Custom-libraries-27-320.jpg)
![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
}
]
})](https://image.slidesharecdn.com/angular-injectiontokenslibraries-181128054618/85/Angular-injection-tokens-Custom-libraries-28-320.jpg)
![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]
})](https://image.slidesharecdn.com/angular-injectiontokenslibraries-181128054618/85/Angular-injection-tokens-Custom-libraries-29-320.jpg)
![ModuleWithProviders - Angular Router
export class RouterModule {
static forRoot(routes: Routes, config?: ExtraOptions):
ModuleWithProviders<RouterModule> {
return {
ngModule: RouterModule,
providers: [
...
],
};
}
}](https://image.slidesharecdn.com/angular-injectiontokenslibraries-181128054618/85/Angular-injection-tokens-Custom-libraries-33-320.jpg)
Angular - injection tokens & Custom libraries
- 1. Injection Tokens & Custom Libraries
- 2. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech • Weekends FE developer @ fashbash.co
- 3. Let’s build a strong Angular community together!!
- 6. Talk Objective - logger package
- 7. ● 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
- 8. Talk Objective - logger package DI Angular libs Injection Tokens Module With Providers
- 9. Libraries
- 10. The pack your code into a NPM package, and reuse it within other projects
- 12. @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 { }
- 13. ng-packger ● Library generator ● Configure for testing and building the Module out of the box ● Started as an open source project, now -> Angular CLI
- 14. DI
- 15. Why we need Dependency Injection?
- 16. Separate the concept of depending on something from the knowledge of how to construct it
- 17. ` Decoupling Reuse Testing Why we need Dependency Injection?
- 18. What can’t be injected? ● Primitives - strings, numbers etc… ● Interfaces - objects ● Functions ● Observables
- 19. Tokens ● Key Which identifies a value to injected ● Not have to be declared at build time, Must exist at runtime
- 20. 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!
- 21. Create our own Injection Token export const loggerConfig = new InjectionToken<LoggerConfig>('Config for logger interceptor'); constructor(@Inject(loggerConfig) private config: LoggerConfig) { }
- 22. How we can provide the run time value to the Injection Token? Providers!
- 23. Provide the value useClass @NgModule({ declarations: [], imports: [ ], providers: [ {provide: LoggerService, useClass: LoggerService}], exports: [LoggerComponent] })
- 24. Provide the value useClass - syntactic sugar @NgModule({ declarations: [], imports: [ ], providers: [LoggerService], exports: [LoggerComponent] })
- 25. Provide the value useValue @NgModule({ declarations: [], imports: [ ], providers: [{ provide: loggerConfig, useValue: {appName: 'APP1'} }], exports: [LoggerComponent] })
- 26. Provide the value useExisting @NgModule({ declarations: [], imports: [ ], providers: [{ provide: LoggerService, useExisting: HttpLoggerService }], exports: [LoggerComponent] })
- 27. Provide the value useFactory @NgModule({ declarations: [], imports: [ ], providers: [{ provide: LoggerService, useFactory: () => { return new LoggerService(); } }], exports: [LoggerComponent] })
- 28. 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 } ] })
- 29. 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] })
- 30. @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) { }
- 31. Now…we know how to provide the value to our tokens… How the end-user should know this tokens exists? BUT
- 32. ModuleWithProviders ● Static function inside the module that can get parameters ● Return ngModule but controlling the providers
- 33. ModuleWithProviders - Angular Router export class RouterModule { static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders<RouterModule> { return { ngModule: RouterModule, providers: [ ... ], }; } }
- 34. 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
- 35. Few more things…
- 37. NX