npm-Packages for Angular

Session from my talk at BASTA! 2017 in Mainz (Germany).

Transcript

1. Wiederverwendbare npm- Pakete und Plugins für Angular Manfred Steyer SOFTWAREarchitekt.at
2. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
3. Inhalt • npm-Pakete • Barrels • Projektstart • Test & Deployment • DEMO • Plugin Systeme
4. Warum npm-Pakete? Wiederverwendbare Logik Strukturierung großer Anwendungen
5. npm-Pakete
6. Aufbau eines npm-Paketes • node_modules • your-stuff • package.json
7. Einträge in package.json (Auszug) name version description entry-point(s) typings dependencies
8. Metadaten in package.json { "name": "lib-starter", "description": "...", "version": "0.0.2", [...] }
9. Entry Point { "name": "lib-starter", "description": "...", "version": "0.0.2", "main": "bundles/lib-starter.umd.js" }
10. package.json { "name": "lib-starter", "description": "...", "version": "0.0.2", "main": "bundles/lib-starter.umd.js", "module": "index.es5.js", "es2015": "index.js" } EcmaScript 5 als UMD-Bundle EcmaScript 5 mit Modulen (import, export) EcmaScript 2015
11. package.json { "name": "lib-starter", "description": "...", "version": "0.0.2", "main": "bundles/lib-starter.umd.js", "module": "index.es5.js", "es2015": "index.js" } import { … } from 'lib-starter'; import { … } from 'libstarter/other-file';
12. package.json { "dependencies": { "@angular/core": "4.2.0", "@angular/http": "4.2.0" } }
13. package.json { "dependencies": { "@angular/core": "4.2.0", "@angular/http": "4.2.0" } }
14. package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^4.0.0", "@angular/http": "^4.0.0" } }
15. package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^4.0.0", "@angular/http": "^4.0.0" }, "devDependencies": { [...] } }
16. Barrels
17. Barrels • ES Module: Datei == Modul • Zu feingranular für Konsumenten der Bibliothek • Barrels fassen verschiedene Exporte aus den einzelnen Dateien zusammen • "Public API" • Standard-Barrel: Entry Point • Weitere Barrels möglich
18. index.ts als Barrel export * from './src/demo.service'; export { OtherDemoService } from './src/other-demo.service'; @NgModule({ … }) export class LibStarterModule { }
19. Projektstart
20. Angular Package Format https://goo.gl/hjt7G3
21. Metadaten für AOT Bibliothek muss für AOT Metadaten bereitstellen { […] "angularCompilerOptions": { "strictMetadataEmit": true, "skipTemplateCodegen": true } }
22. Viele Details
23. Generator • npm install -g yo • npm install -g generator-angular2-library • yo angular2-library
24. Test und Deployment
25. Pakete lokal testen • Symbolische Links • Bibliothek: npm link • Konsument: npm link name-der-bibliothek
26. Lessons Learned • Zum Debuggen src-Ordner linken • Ggf. src-Ordner sogar kopieren • ng serve --preserve-symlinks • Für Test vor Production: dist-Ordner linken + AOT
27. Lokale npm-Registry • TFS • Nexus • Verdaccio • Leichtgewichtiges Node-Paket • Installation: npm i -g verdaccio • Start: verdaccio
28. Vor Veröffentlichung • Versionsnummer in package.json hochzählen • npm version [patch|minor|major] • npm version 3.1.0
29. Pakete veröffentlichen • npm publish • npm install package-name
30. Pakete veröffentlichen • npm publish --registry http://localhost:4873 • npm install package-name --registry http://localhost:4873
31. Alternativen zur Auswahl der Registry • Global: npm set registry http://localhost:4873 • Standard: registry.npmjs.org • npm get registry • Pro Projekt: .npmrc im Projektroot
32. DEMO
33. Plugin-Systeme Bibliotheken dynamisch Laden
34. Motivation Dynamisch erweitern Micro Services
35. Regel #1 • Tun Sie es nicht! :-) • Das Angular und das Tooling funktionieren am besten, wenn alles gemeinsam kompiliert wird (Angular CLI oder WebPack, Tree Shaking) • Angular selbst es an und für sich egal, wie Module geladen werden … • Versuchen mit Paketen und einer npm-Registry zu arbeiten • Häufig gibt es eine endliche Liste an Plugins …
36. Und wenn ich unbedingt möchte? • Wechseln Sie zu SystemJS • Angular CLI/ WebPack gehen davon aus, dass alles zusammen kompiliert wird • Seed: https://github.com/mgechev/angular-seed • Vergessen Sie Tree Shaking • Nutzen Sie Lazy Loading ODER • Laden Sie Angular Module manuell
37. Lazy Loading const ROUTES: Routes = [ { path: 'home', component: HomeComponent, }, { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' } ]
38. Lazy Loading const ROUTES: Routes = [ { path: 'home', component: HomeComponent, }, { path: 'lazy', loadChildren: () => System.import('http://127.0.0.1:8080/plugin-rollup.umd.js') .then(m => m.SampleModule) } ]
39. Manuelles Laden
40. Achtung: Low-Level APIs!
41. Manuelles Laden NgModule Factory Loader NgModule Factory NgModuleRef Module
42. Manuelles Laden Component Factory Resolver Component Factory ComponentRef Component
43. Platzhalter für dynamische Komponente <div #placeholder></div>
44. Umsetzung @Component({ … }) export class AppComponent implements AfterViewInit, OnDestroy { […] @ViewChild("placeholder", {read: ViewContainerRef}) viewContainer: ViewContainerRef; […] }
45. Umsetzung @Component({ … }) export class AppComponent implements AfterViewInit, OnDestroy { […] @ViewChild("placeholder", {read: ViewContainerRef}) viewContainer: ViewContainerRef; componentRef: ComponentRef<{}>; […] }
46. Umsetzung @Component({ … }) export class AppComponent implements AfterViewInit, OnDestroy { constructor(private loader: NgModuleFactoryLoader, private injector: Injector) { } @ViewChild("placeholder", {read: ViewContainerRef}) viewContainer: ViewContainerRef; componentRef: ComponentRef<{}>; […] }
47. ngAfterViewInit() { this.loader.load('http://127.0.0.1:8080/plugin-rollup.umd.js#SampleModule') .then((moduleFactory) => { […] }); }
48. ngAfterViewInit() { this.loader.load('http://127.0.0.1:8080/plugin-rollup.umd.js#SampleModule') .then((moduleFactory) => { let moduleRef = moduleFactory.create(this.injector); let module = moduleRef.instance; […] }); }
49. ngAfterViewInit() { this.loader.load('http://127.0.0.1:8080/plugin-rollup.umd.js#SampleModule') .then((moduleFactory) => { let moduleRef = moduleFactory.create(this.injector); let module = moduleRef.instance; let compType = module.constructor.decorators[0].args[0].exports .find( e => e.name == 'DashBoardComponent'); […] }); }
50. ngAfterViewInit() { this.loader.load('http://127.0.0.1:8080/plugin-rollup.umd.js#SampleModule') .then((moduleFactory) => { let moduleRef = moduleFactory.create(this.injector); let module = moduleRef.instance; let compType = module.constructor.decorators[0].args[0].exports .find( e => e.name == 'DashBoardComponent'); let componentFactoryResolver = moduleRef.componentFactoryResolver; let componentFactory = componentFactoryResolver .resolveComponentFactory(compType); […] }); }
51. ngAfterViewInit() { this.loader.load('http://127.0.0.1:8080/plugin-rollup.umd.js#SampleModule') .then((moduleFactory) => { let moduleRef = moduleFactory.create(this.injector); let module = moduleRef.instance; let compType = module.constructor.decorators[0].args[0].exports .find( e => e.name == 'DashBoardComponent'); let componentFactoryResolver = moduleRef.componentFactoryResolver; let componentFactory = componentFactoryResolver .resolveComponentFactory(compType); let componentRef = this.viewContainer .createComponent(componentFactory, null, this.injector); […] }); }
52. ngAfterViewInit() { this.loader.load('http://127.0.0.1:8080/plugin-rollup.umd.js#SampleModule') .then((moduleFactory) => { let moduleRef = moduleFactory.create(this.injector); let module = moduleRef.instance; let compType = module.constructor.decorators[0].args[0].exports .find( e => e.name == 'DashBoardComponent'); let componentFactoryResolver = moduleRef.componentFactoryResolver; let componentFactory = componentFactoryResolver .resolveComponentFactory(compType); let componentRef = this.viewContainer .createComponent(componentFactory, null, this.injector); let comp: any = componentRef.instance; this.componentRef = componentRef; }); }
53. Aufräumen ngOnDestroy() { this.componentRef.destroy(); }
54. Volles Beispiel • https://github.com/manfredsteyer/angular-dynamic-loading
55. Fazit Pakete für Struktur und Reuse Angular Package Format Yeoman- Generator npm link Eigene Registry Plugins als Ultima Ratio
56. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer