The best way to Architect Your Angular Libraries

on YouTube ↗01h 03m

" summary

Claim: architect Angular libraries with sub-entries so consumers get minimal bundles and teammates get clear module boundaries. Live-coding uses Angular CLI, an app + library workspace, three modules (A/B/C), and webpack-era behavior: adding 100 KB of dummy text only lands in C, but importing commonjs moment.js pulls ~350 KB into bundles and inflates main from about 675 KB to ~201 KB after switching to sub-entries. The implemented sub-entry package.json/index/public_api setup fixes code-splitting and commonjs tree-shaking in practice.

AI-written summary · about

" chapters (17)

1. 0:00Start
2. 1:47The Best Way to Architect Your Angular Libraries
3. 9:42Live Coding
4. 10:21Angular Library Architecture
5. 12:09Generate Multiple Modules
6. 26:00Codes Splitting
7. 26:29Virtual Pre-Bundle
8. 33:17Sub Entries
9. 37:23Code Splitting
10. 44:23Circular Dependency
11. 48:24Best Practices
12. 54:10Omniboard
13. 56:05Custom Dashboards
14. 57:41Share the Code
15. 58:33What Is the Benefit To Have Single Library with Three Module Sub Entries Instead of Three Distinct Libraries
16. 59:58Suggestions on How To Generate Documentation
17. 1:01:20Deep Import

" related talks

• 16mBest PracticesStephen Fluin · ng-conf 2017
• 35mHow to Organize an Angular ProjectSergio Brito · Connect.Tech 2021
• 33mArchitectures for huge Angular based Enterprise Applications: npm Packages, Monorepos and MicroservicesManfred Steyer · DevOne 2019
• 19mTuning Your Angular ApplicationBonnie Brennan, Matt Carniatto · ngVikings 2019
• 31mArchitectures for huge Angular based enterprise applications npm Packages, Monorepos and Micro AppsManfred Steyer · Angular Connect 2018
• 01h 13mInternals of the Angular CLIMinko Gechev · HolyJS Piter 2020
• 20mArchitectures for huge Angular based Enterprise Applications...Manfred Steyer · NG Poland 2018
• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021