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

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