Angular 7 から 8にあげてみた /ng-kyoto-angular-meetup-10

ng-kyoto Angular Meetup #10 および ng-japan meetup 2019 Spring (2019/05/29)での 発表資料です。
https://ng-kyoto.connpass.com/event/124745/
https://ngjapan.connpass.com/event/124752/

Transcript

1. Angular 7͔Β8ʹ͋͛ͯΈͨ ng-kyoto Angular Meetup #10
 @sayanaka
2. sayanaka • JavaScriptྺ 3೥ɺAngularྺ 2೥ • ng-kyoto୅ද
 https://ng-kyoto.angular.jp/ • Twitter 
 @zilch8
3. Angular 8.0.0-rc.5
4. ͱࢥͬͨΒ ࠓ೔ 8.0.0 ग़·ͨ͠ʂ
5. ࣾ಺Ͱ։ൃதͷϓϩμΫτΛ 8.0.0-rc.5 8.0.0ʹʂ
 Updateͯ͠ΈΑ͏ʂʂʂ ͱ͍͏Θ͚Ͱ…
6. ͓͜ͱΘΓ • Ξοϓσʔτର৅͸ɺ
 ࣾ಺Ͱ։ൃதͷϓϩμΫτ • Έͳ͞ΜͷϓϩμΫτͰ͸
 ҧ͏݁Ռ͕ग़Δ͔΋ɾɾɾ • ౖΒΕͨΒා͍ͷͰ
 ը໘ɾ࣮ίʔυ͸ग़ͤ·ͤΜ͕͝༰ࣻΛɾɾɾʂ
7. ର৅ϓϩμΫτͷ֓ཁ • ϥΠϒϥϦ • @angular/core - 7.2.15 • ngrx - 7.4.0 • ͦͷଞαʔυύʔςΟ੡ϥΠϒϥϦ͕ Nݸ • ng newͰ࡞ΒΕΔઃఆϑΝΠϧ܈͸ɺ
 ΄΅ͦͷ··
8. @angular/cli 8.0.0 • σʔλఏڙͯ͘͠ΕΔʁͬͯฉ͍ͯ͘ΔΑ͏ʹͳ Γ·ͨ͠ • ͋ͱ͔Βoff΋ग़དྷΔͬΆ͍
9. ng update • ϥΠϒϥϦͷΞοϓσʔτ༻ίϚϯυ • https://angular.jp/cli/update • ϥΠϒϥϦಉ࢜ͷґଘؔ܎΋ݟͯ͘ΕΔ • αʔυύʔςΟʔ੡ϥΠϒϥϦ΋updateՄೳ • nextΦϓγϣϯ • RC΍betaΛམͱͤΔΑ͏ʹͳΔ
10. ng update
11. ng update —all • AngularνʔϜҎ֎ͷ
 ϥΠϒϥϦ͕ະରԠͳͷͰɺwarningࡇΓ
12. ͋͑ͯڧ੍Ξοϓσʔτ • forceΦϓγϣϯͰՄೳ • શ෦Ξοϓσʔτ • ໌ࣔతʹΞοϓσʔτ ng update --all --force ng update @angular/{cdk,cli,core,material} @ngrx/store —force
13. ng updateʢ໌ࣔࢦఆʣ • ԼهͷΑ͏ͳද͕ࣔग़͕ͨɺ
 ແࣄΞοϓσʔτ׬ྃ ng update @angular/{cdk,cli,core,material} @ngrx/store --force
14. updateޙͷpackage.json • ໌ࣔࢦఆ͞ΕͨϥΠϒϥϦͱɺ
 ͦͷґଘ͕ߋ৽͞Ε͍ͯΔ
15. ng serve • ΍ ͬ ͨ ͥ • ը໘͸ݟͤΒΕͳ͍͚Ͳɺ
 ϒϥ΢β/ςετڞʹ͏͍ͨ͝ʂ
16. ࢥͬͨΑΓ؆୯ʹ ग़དྷͯ͠·ͬͨ… ͜Ε͡ΌൃදʹͳΒͳ͍… ng update͍͢͝!!
17. ࠩ෼ΛݟͯΈΔ
18. ࠩ෼ΛݟͯΈΔ • browserslist • த਎͕ಉ͡΋ͷ͕ ࡞Γ௚͞Ε͍ͯͨ • package.json, yarn.lock • ໌ࣔࢦఆ͓͍ͯͨ͠ϥΠϒϥϦͱɺ
 ͦͷґଘϥΠϒϥϦ͕Ξοϓσʔτ
19. ࠩ෼ΛݟͯΈΔ - polyfills.ts • ΊͬͪΌมΘͬͯΔʂ • ௐ΂͖Εͳ͔ͬͨɾɾɾ
20. ࠩ෼ΛݟͯΈΔ - tslint.json • ϧʔϧ໊͕มΘ͍ͬͯΔ • https://github.com/mgechev/codelyzer/issues/791 • tslintଆͰϧʔϧ໊ͷߋ৽͕͋ͬͨΒ͘͠ɺ
 ͦͷରԠͱͷ͜ͱ

21. ࠩ෼ΛݟͯΈΔ - tsconfig.json • module : “es2015” => “esnext” • TypeScriptͰɺ
 Dynamic ImportͰ͖ΔΑ͏ʹ͢ΔͨΊͷมߋ • target : “es5” => “es2015” • https://github.com/angular/angular-cli/issues/14321 • ݹ͍CLIͰ࡞ΒΕͨtsconfig.jsonͷtargetઃఆ͕ɺ
 ࣗಈతʹΞοϓσʔτ͞ΕΔΑ͏ʹͳͬͨ
22. ࠩ෼ΛݟͯΈΔ - xxx.component.ts • ViewChildʹɺ{static: true}͕෇Ճ͞Ε͍ͯΔ • V8Ͱͷഁյతมߋ • @ViewChild / @ContentChild͸ɺ
 ୈೋҾ਺͕ඞཁʹͳͬͨ • ͨͩ͠ɺ
 @ViewChildren / @ContentChildren͸ର৅֎
23. @xxChildͷୈೋҾ਺ ᶃ • @xxChild͸ɺ
 ngOnInit Ͱ༗ޮʹͳΔ৔߹ͱɺ
 ngAfterViewInit / ngAfterContentInit Ͱ༗ޮʹͳΔ৔߹ ͕ଘࡏ͍ͯ͠Δ • ྫ͑͹ɺcomponent.ts͕Լهͷ࣌ • foo͸ngOnInit()Ͱ༗ޮʢ੩తʣ • foo͸ngAfterViewInit()·Ͱ༗ޮʹͳΒͳ͍ʢಈతʣ
 
 @ViewChild(“foo”) foo: ElementRef; <div foo></div> <div foo *ngIf="showing"></div>
24. @xxChildͷୈೋҾ਺ ᶄ • v8Ͱ͸ɺม਺એݴͷࡍʹɺ੩త͔ಈత͔Λ໌ࣔతʹࢦఆ͢Δ͜ͱ͕ඞཁʹͳͬͨ • ੩తʢngOnInitͰ༗ޮʣ => { static : true } • ಈతʢngAfterViewInitͰ༗ޮʣ => { static : false } • جຊతʹ͸ɺʢng update͢ΔͱʣCLI͕Կͱ͔ͯ͘͠ΕΔͷͰɺώτ͕ରԠ͢Δ ඞཁ͸ͳ͍ • CLI͕ରԠͰ͖ͳ͔ͬͨ৔߹͸ɺ
 /* TODO: add static flag */ ͱ͍͏ίϝϯτ͕෇Ճ͞ΕΔʁ • v9Ͱ͸ɺ { static : false } ͸লུՄೳʹͳΔ༧ఆͱͷ͜ͱ
25. @xxChildͷୈೋҾ਺ ᶅ • ઌ΄Ͳͷදࣔ☝͸ɺ͜ͷมߋʹର͢Δ͓஌Βͤͩͬͨ • ࢀߟɾৄࡉ • https://angular.io/guide/static-query-migration • https://github.com/angular/angular/issues/30654

26. ϝδϟʔΞοϓσʔτͰ͕͢
 ࢥ͍ͬͯͨΑΓ
 ࠩ෼͕গͳ͍ҹ৅ ͋͘·Ͱ΋ฐϓϩμΫτͰ͸ɺͰ͕͢ɾɾɾ
27. ·ͱΊ • ng updateΊͬͪΌศརʂ • @xxChildΛ࢖͍ͬͯΔՕॴ͸ɺ
 Ξοϓσʔτޙʹ
 ͖ͪΜͱ֬ೝ͓͖ͯ͠·͠ΐ͏
28. ͓खݩͷ
 AngularϓϩδΣΫτͰ΋ ͥͻ ͓ࢼ͠Λʂ
29. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ