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

by Sayaka Nakatsuka

Slide 1

Slide 1 text

Angular 7͔Β8ʹ͋͛ͯΈͨ ng-kyoto Angular Meetup #10  @sayanaka

Slide 2

Slide 2 text

sayanaka • JavaScriptྺ 3೥ɺAngularྺ 2೥ • ng-kyoto୅ද  https://ng-kyoto.angular.jp/ • Twitter   @zilch8

Slide 3

Slide 3 text

Angular 8.0.0-rc.5

Slide 4

Slide 4 text

ͱࢥͬͨΒ ࠓ೔ 8.0.0 ग़·ͨ͠ʂ

Slide 5

Slide 5 text

ࣾ಺Ͱ։ൃதͷϓϩμΫτΛ 8.0.0-rc.5 8.0.0ʹʂ  Updateͯ͠ΈΑ͏ʂʂʂ ͱ͍͏Θ͚Ͱ…

Slide 6

Slide 6 text

͓͜ͱΘΓ • Ξοϓσʔτର৅͸ɺ  ࣾ಺Ͱ։ൃதͷϓϩμΫτ • Έͳ͞ΜͷϓϩμΫτͰ͸  ҧ͏݁Ռ͕ग़Δ͔΋ɾɾɾ • ౖΒΕͨΒා͍ͷͰ  ը໘ɾ࣮ίʔυ͸ग़ͤ·ͤΜ͕͝༰ࣻΛɾɾɾʂ

Slide 7

Slide 7 text

ର৅ϓϩμΫτͷ֓ཁ • ϥΠϒϥϦ • @angular/core - 7.2.15 • ngrx - 7.4.0 • ͦͷଞαʔυύʔςΟ੡ϥΠϒϥϦ͕ Nݸ • ng newͰ࡞ΒΕΔઃఆϑΝΠϧ܈͸ɺ  ΄΅ͦͷ··

Slide 8

Slide 8 text

@angular/cli 8.0.0 • σʔλఏڙͯ͘͠ΕΔʁͬͯฉ͍ͯ͘ΔΑ͏ʹͳ Γ·ͨ͠ • ͋ͱ͔Βoff΋ग़དྷΔͬΆ͍

Slide 9

Slide 9 text

ng update • ϥΠϒϥϦͷΞοϓσʔτ༻ίϚϯυ • https://angular.jp/cli/update • ϥΠϒϥϦಉ࢜ͷґଘؔ܎΋ݟͯ͘ΕΔ • αʔυύʔςΟʔ੡ϥΠϒϥϦ΋updateՄೳ • nextΦϓγϣϯ • RC΍betaΛམͱͤΔΑ͏ʹͳΔ

Slide 10

Slide 10 text

ng update

Slide 11

Slide 11 text

ng update —all • AngularνʔϜҎ֎ͷ  ϥΠϒϥϦ͕ະରԠͳͷͰɺwarningࡇΓ

Slide 12

Slide 12 text

͋͑ͯڧ੍Ξοϓσʔτ • forceΦϓγϣϯͰՄೳ • શ෦Ξοϓσʔτ • ໌ࣔతʹΞοϓσʔτ ng update --all --force ng update @angular/{cdk,cli,core,material} @ngrx/store —force

Slide 13

Slide 13 text

ng updateʢ໌ࣔࢦఆʣ • ԼهͷΑ͏ͳද͕ࣔग़͕ͨɺ  ແࣄΞοϓσʔτ׬ྃ ng update @angular/{cdk,cli,core,material} @ngrx/store --force

Slide 14

Slide 14 text

updateޙͷpackage.json • ໌ࣔࢦఆ͞ΕͨϥΠϒϥϦͱɺ  ͦͷґଘ͕ߋ৽͞Ε͍ͯΔ

Slide 15

Slide 15 text

ng serve • ΍ ͬ ͨ ͥ • ը໘͸ݟͤΒΕͳ͍͚Ͳɺ  ϒϥ΢β/ςετڞʹ͏͍ͨ͝ʂ

Slide 16

Slide 16 text

ࢥͬͨΑΓ؆୯ʹ ग़དྷͯ͠·ͬͨ… ͜Ε͡ΌൃදʹͳΒͳ͍… ng update͍͢͝!!

Slide 17

Slide 17 text

ࠩ෼ΛݟͯΈΔ

Slide 18

Slide 18 text

ࠩ෼ΛݟͯΈΔ • browserslist • த਎͕ಉ͡΋ͷ͕ ࡞Γ௚͞Ε͍ͯͨ • package.json, yarn.lock • ໌ࣔࢦఆ͓͍ͯͨ͠ϥΠϒϥϦͱɺ  ͦͷґଘϥΠϒϥϦ͕Ξοϓσʔτ

Slide 19

Slide 19 text

ࠩ෼ΛݟͯΈΔ - polyﬁlls.ts • ΊͬͪΌมΘͬͯΔʂ • ௐ΂͖Εͳ͔ͬͨɾɾɾ

Slide 20

Slide 20 text

ࠩ෼ΛݟͯΈΔ - tslint.json • ϧʔϧ໊͕มΘ͍ͬͯΔ • https://github.com/mgechev/codelyzer/issues/791 • tslintଆͰϧʔϧ໊ͷߋ৽͕͋ͬͨΒ͘͠ɺ  ͦͷରԠͱͷ͜ͱ 

Slide 21

Slide 21 text

ࠩ෼ΛݟͯΈΔ - tsconﬁg.json • module : “es2015” => “esnext” • TypeScriptͰɺ  Dynamic ImportͰ͖ΔΑ͏ʹ͢ΔͨΊͷมߋ • target : “es5” => “es2015” • https://github.com/angular/angular-cli/issues/14321 • ݹ͍CLIͰ࡞ΒΕͨtsconﬁg.jsonͷtargetઃఆ͕ɺ  ࣗಈతʹΞοϓσʔτ͞ΕΔΑ͏ʹͳͬͨ

Slide 22

Slide 22 text

ࠩ෼ΛݟͯΈΔ - xxx.component.ts • ViewChildʹɺ{static: true}͕෇Ճ͞Ε͍ͯΔ • V8Ͱͷഁյతมߋ • @ViewChild / @ContentChild͸ɺ  ୈೋҾ਺͕ඞཁʹͳͬͨ • ͨͩ͠ɺ  @ViewChildren / @ContentChildren͸ର৅֎

Slide 23

Slide 23 text

@xxChildͷୈೋҾ਺ ᶃ • @xxChild͸ɺ  ngOnInit Ͱ༗ޮʹͳΔ৔߹ͱɺ  ngAfterViewInit / ngAfterContentInit Ͱ༗ޮʹͳΔ৔߹ ͕ଘࡏ͍ͯ͠Δ • ྫ͑͹ɺcomponent.ts͕Լهͷ࣌ • foo͸ngOnInit()Ͱ༗ޮʢ੩తʣ • foo͸ngAfterViewInit()·Ͱ༗ޮʹͳΒͳ͍ʢಈతʣ    @ViewChild(“foo”) foo: ElementRef;

Slide 24

Slide 24 text

@xxChildͷୈೋҾ਺ ᶄ • v8Ͱ͸ɺม਺એݴͷࡍʹɺ੩త͔ಈత͔Λ໌ࣔతʹࢦఆ͢Δ͜ͱ͕ඞཁʹͳͬͨ • ੩తʢngOnInitͰ༗ޮʣ => { static : true } • ಈతʢngAfterViewInitͰ༗ޮʣ => { static : false } • جຊతʹ͸ɺʢng update͢ΔͱʣCLI͕Կͱ͔ͯ͘͠ΕΔͷͰɺώτ͕ରԠ͢Δ ඞཁ͸ͳ͍ • CLI͕ରԠͰ͖ͳ͔ͬͨ৔߹͸ɺ  /* TODO: add static ﬂag */ ͱ͍͏ίϝϯτ͕෇Ճ͞ΕΔʁ • v9Ͱ͸ɺ { static : false } ͸লུՄೳʹͳΔ༧ఆͱͷ͜ͱ

Slide 25

Slide 25 text

@xxChildͷୈೋҾ਺ ᶅ • ઌ΄Ͳͷදࣔ☝͸ɺ͜ͷมߋʹର͢Δ͓஌Βͤͩͬͨ • ࢀߟɾৄࡉ • https://angular.io/guide/static-query-migration • https://github.com/angular/angular/issues/30654 

Slide 26

Slide 26 text

ϝδϟʔΞοϓσʔτͰ͕͢  ࢥ͍ͬͯͨΑΓ  ࠩ෼͕গͳ͍ҹ৅ ͋͘·Ͱ΋ฐϓϩμΫτͰ͸ɺͰ͕͢ɾɾɾ

Slide 27

Slide 27 text

·ͱΊ • ng updateΊͬͪΌศརʂ • @xxChildΛ࢖͍ͬͯΔՕॴ͸ɺ  Ξοϓσʔτޙʹ  ͖ͪΜͱ֬ೝ͓͖ͯ͠·͠ΐ͏