Architecting Angular Applications with Angular Libraries

Angular offers a large ecosystem when it comes to separation and architecture of your application. There are often pieces of code that you don't just want to reuse within your application, but to make available to other applications in your organization or via package managers like npm over the Internet. This is where angular libraries come into play. In this talk, Fabian Gosebrink explores the way Angular Libraries are built, what the Angular Package format is good for, and how we can move code from an existing application to an Angular Library to reuse the code across multiple applications. This makes scaling and the architecture of angular applications a breeze.

Transcript

10. Component Component Component Service
11. Component Component Component Service Component
12. Component Component Component Service Component
13. Component Component Component Service Component
14. Component Component Component Service Component
15. Modules Services App 1
16. Modules Services App 1 Modules Services App 2
17. Modules Services App 1 Modules Services App 2 Library
18. Modules Services App 1 Modules Services App 2 Library
19. Modules App 1 Modules App 2 Library Services Modules Etc.
23. https://blog.mgechev.com/2017/01/21/distributing-an-angular-library-aot-ngc-types
39. Code
41. $ ng build my-lib --watch
42. $ ng test my-lib
43. Using The lib
45. $ npm install my-lib/dist
46. $ cd my-lib/dist $ npm pack $ npm install my-lib/dist/package.tgz
47. Deploying The lib
48. { "name": "angular-rating", "version": "0.0.1", "peerDependencies": { "@angular/common": "^6.0.0-rc.0 || ^6.0.0", "@angular/core": "^6.0.0-rc.0 || ^6.0.0" } }
49. { "name": "angular-rating", "version": "0.0.1", "peerDependencies": { "@angular/common": "^6.0.0-rc.0 || ^6.0.0", "@angular/core": "^6.0.0-rc.0 || ^6.0.0" } }
50. <major>.<minor>.<patch> https://semver.org/
51. { "name": "angular-rating", "version": "0.0.1", "peerDependencies": { "@angular/common": "^6.0.0-rc.0 || ^6.0.0", "@angular/core": "^6.0.0-rc.0 || ^6.0.0" } }
52. { "name": "@fabiangosebrink/angular-rating", "version": "0.0.1", "peerDependencies": { "@angular/common": "^6.0.0-rc.0 || ^6.0.0", "@angular/core": "^6.0.0-rc.0 || ^6.0.0" } }
53. Login to npm Add a Readme File Version & Name Npm Publish
54. Be su re to remove all sensitive i n fo rmati on befo re pu blish i ng!
56. THANK YOU!!!
57. Fabian Gosebrink http://offering.solutions http://github.com/FabianGosebrink http://fabian-gosebrink.com @FabianGosebrink