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