Architecting Angular Applications with Angular Libraries

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.

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

October 07, 2019
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  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.

  20. None
  21. None
  22. None
  23. https://blog.mgechev.com/2017/01/21/distributing-an-angular-library-aot-ngc-types

  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. Code

  40. None
  41. $ ng build my-lib --watch

  42. $ ng test my-lib

  43. Using The lib

  44. None
  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!
  55. None
  56. THANK YOU!!!

  57. Fabian Gosebrink http://offering.solutions http://github.com/FabianGosebrink http://fabian-gosebrink.com @FabianGosebrink