Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Packages for Angular, Talk at ng-vienna in October 2017

15934fa2aa7b2ce21f091e9b7cffa856?s=47 Manfred Steyer
PRO
November 01, 2017
110

Packages for Angular, Talk at ng-vienna in October 2017

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

November 01, 2017
Tweet

Transcript

  1. Packages for Angular Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

  2. About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer

    & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
  3. Contents • npm Packages • Barrels • Starting a Project

    • Test & Deployment • DEMO • Schematics Sneak Peek
  4. Why npm Packages? Reusable Logic Structuring big Applications

  5. npm Packages

  6. Structure of an npm Package • /node_modules • your-stuff •

    package.json
  7. Properties in package.json (Selection) name version description entry-point(s) typings dependencies

  8. Barrels

  9. Idea behind Barrels • ES Module: File == Modul •

    Far too fine-grained for consumers of an lib • Barrel == Façade for those files == Public API
  10. index.ts as Barrel export * from './src/demo.service'; export { OtherDemoService

    } from './src/other-demo.service'; @NgModule({ … }) export class LibStarterModule { }
  11. Project Start

  12. Angular Package Format https://goo.gl/hjt7G3

  13. Many Details!

  14. Generator • npm install -g yo • npm install -g

    generator-angular2-library • yo angular2-library
  15. Other Generator Focus regarding Packages: Internal usage for structuring big

    applications (monorepo) + much more (Ngrx, ngUpgrade, …) https://nrwl.io/nx
  16. Test and Deployment

  17. Local testing • Symbolic Links • Library: npm link •

    Consumer: npm link library-name
  18. Lessons Learned • Debugging: Link src folder • Or even

    copy src folder • ng serve --preserve-symlinks • Testing before production: link dist folder and test with AOT* * will be default soon
  19. Publishing to npm Registry • Increment version in package.json •

    npm version [patch | minor | major | version] • npm run build • cd ../dist • npm publish --registry http://localhost:4873 • npm install --registry http://localhost:4873
  20. Locale npm-Registry • TFS • Nexus • Verdaccio • Very

    lightweight • npm i -g verdaccio • Start: verdaccio
  21. Alternatives for setting the Registry • Global: npm set registry

    http://localhost:4873 • Default: registry.npmjs.org • npm get registry • Project: .npmrc in project root
  22. DEMO <<Token>> LOGGER_DEBUG: InjectionTaken<boolean>(…)

  23. Schematics Sneak Peak

  24. Package w/ Schematics Collection Command Args Factory w/ Rules for

    Code Generation Templates
  25. Template import { AbstractFormatterService } from 'my-lib'; export class <%=

    classify(name) %>Service implements AbstractFormatterService { public format(message: string): string { <% if (demoImpl) { %> // Some Demo Implementation <% } else { %> return message; <% } %> } }
  26. More about this • See Blog at https://softwarearchitekt.at/

  27. Conclusion Packages for Structuring and Reuse Angular Package Format Generator

    npm link Own Registry Schematics
  28. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer