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

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

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

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

November 01, 2017
Tweet

Transcript

  1. 2.

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

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

    Contents • npm Packages • Barrels • Starting a Project

    • Test & Deployment • DEMO • Schematics Sneak Peek
  3. 8.
  4. 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
  5. 10.

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

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

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

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

    Other Generator Focus regarding Packages: Internal usage for structuring big

    applications (monorepo) + much more (Ngrx, ngUpgrade, …) https://nrwl.io/nx
  8. 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
  9. 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
  10. 20.

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

    lightweight • npm i -g verdaccio • Start: verdaccio
  11. 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
  12. 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; <% } %> } }