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

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

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/

Ebd60ccc96d5c538398b4c9121c64317?s=128

Sayaka Nakatsuka

May 29, 2019
Tweet

More Decks by Sayaka Nakatsuka

Other Decks in Technology

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. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ