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

Transcript

1. 1.

   Packages for Angular Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

2. 2.

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

   & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
3. 3.

   Contents • npm Packages • Barrels • Starting a Project

   • Test & Deployment • DEMO • Schematics Sneak Peek
4. 4.

   Why npm Packages? Reusable Logic Structuring big Applications

5. 5.

   npm Packages

6. 6.

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

   package.json
7. 7.

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

8. 8.

   Barrels

9. 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. 10.

    index.ts as Barrel export * from './src/demo.service'; export { OtherDemoService

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

    Project Start

12. 12.

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

13. 13.

    Many Details!

14. 14.

    Generator • npm install -g yo • npm install -g

    generator-angular2-library • yo angular2-library
15. 15.

    Other Generator Focus regarding Packages: Internal usage for structuring big

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

    Test and Deployment

17. 17.

    Local testing • Symbolic Links • Library: npm link •

    Consumer: npm link library-name
18. 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. 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. 20.

    Locale npm-Registry • TFS • Nexus • Verdaccio • Very

    lightweight • npm i -g verdaccio • Start: verdaccio
21. 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. 22.

    DEMO <<Token>> LOGGER_DEBUG: InjectionTaken<boolean>(…)

23. 23.

    Schematics Sneak Peak

24. 24.

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

    Code Generation Templates
25. 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. 26.

    More about this • See Blog at https://softwarearchitekt.at/

27. 27.

    Conclusion Packages for Structuring and Reuse Angular Package Format Generator

    npm link Own Registry Schematics
28. 28.

    Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer