Building Angular Component Libraries

Building Angular Component Libraries

• 1.
  Building Component Libraries ByIsa Conteh
• 2.
  What is aComponent Library?
• 3.
  Design Systems...
• 4.
  Within the TechEcosystem (smaller-company) Basically, the front-end devs
• 5.
  Within the Tech Ecosystem (Ina larger company: UX Engineering)
• 6.
  A note aboutexisting 3rd Party libraries...
• 7.
  Creating Libraries in Angular
• 8.
  Structuring Your Library ●Libraries are modules ● Default: Each Library is a Component (has its own module.ts, package.json etc. file) ● Other Option: Add multiple components to one library/module (one module.ts, package.json etc. file for several components)
• 9.
  Default Structure
• 10.
  Modified Option
• 11.
  Setting up theDev Environment - Create a new workspace (not necessarily a new app) `ng new <workspace-name> --createApplication=false` - Create a library within the workspace `ng generate library <library-name> --prefix=<prefix-name>`
• 12.
  Adding Components tothe Library - Almost the same as with a project:
• 13.
  Things to Think aboutwhen Creating Components in Libraries - Hosting Assets - Handling Environment Variables - Templating - Integrating other libraries
• 14.
  Testing Libraries Locally
• 15.
  Create a testApp Install and Import after adding the library module
• 16.
  Five major steps…. ●Build: `ng build` ● Pack: `npm pack` ● Install: `npm install <.../relative-path/library-name.tgz file ● Import (into your test app): `import { module-name } from “library-name” ● Run: `ng serve --open`
• 17.
  Publishing to NPM -Before packing your library, make sure you’ve added a license - After packing, check NPM to make sure there is no existing package with your library name. - Sign up for an account - Login to your account through your terminal - Run `NPM Publish <package-name>
• 18.
  Use in other Projects:Default Same as with testing a library locally except: - No need to fetch a local version of the library via github - No need to build or pack the library - Install using just the library name (there is no local path) - Updates work just as with any other package
• 19.
  Documentation
• 20.
  Any Questions? (Also, thanksfor coming)