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

Packages for Angular, Talk at ng-vienna in Octo...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
Avatar for Manfred Steyer Manfred Steyer PRO
November 01, 2017
180

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

Avatar for Manfred Steyer

Manfred Steyer PRO

November 01, 2017
Tweet

More Decks by Manfred Steyer

Transcript

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

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

    • Test & Deployment • DEMO • Schematics Sneak Peek
  3. Idea behind Barrels • ES Module: File == Modul •

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

    } from './src/other-demo.service'; @NgModule({ … }) export class LibStarterModule { }
  5. Generator • npm install -g yo • npm install -g

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

    applications (monorepo) + much more (Ngrx, ngUpgrade, …) https://nrwl.io/nx
  7. 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
  8. 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
  9. Locale npm-Registry • TFS • Nexus • Verdaccio • Very

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

    http://localhost:4873 • Default: registry.npmjs.org • npm get registry • Project: .npmrc in project root
  11. 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; <% } %> } }