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

Transcript

  1. 7.

    ର৅ϓϩμΫτͷ֓ཁ • ϥΠϒϥϦ • @angular/core - 7.2.15 • ngrx -

    7.4.0 • ͦͷଞαʔυύʔςΟ੡ϥΠϒϥϦ͕ Nݸ • ng newͰ࡞ΒΕΔઃఆϑΝΠϧ܈͸ɺ
 ΄΅ͦͷ··
  2. 10.
  3. 12.
  4. 18.

    ࠩ෼ΛݟͯΈΔ • browserslist • த਎͕ಉ͡΋ͷ͕ ࡞Γ௚͞Ε͍ͯͨ • package.json, yarn.lock •

    ໌ࣔࢦఆ͓͍ͯͨ͠ϥΠϒϥϦͱɺ
 ͦͷґଘϥΠϒϥϦ͕Ξοϓσʔτ
  5. 21.

    ࠩ෼ΛݟͯΈΔ - tsconfig.json • module : “es2015” => “esnext” •

    TypeScriptͰɺ
 Dynamic ImportͰ͖ΔΑ͏ʹ͢ΔͨΊͷมߋ • target : “es5” => “es2015” • https://github.com/angular/angular-cli/issues/14321 • ݹ͍CLIͰ࡞ΒΕͨtsconfig.jsonͷtargetઃఆ͕ɺ
 ࣗಈతʹΞοϓσʔτ͞ΕΔΑ͏ʹͳͬͨ
  6. 22.

    ࠩ෼ΛݟͯΈΔ - xxx.component.ts • ViewChildʹɺ{static: true}͕෇Ճ͞Ε͍ͯΔ • V8Ͱͷഁյతมߋ • @ViewChild

    / @ContentChild͸ɺ
 ୈೋҾ਺͕ඞཁʹͳͬͨ • ͨͩ͠ɺ
 @ViewChildren / @ContentChildren͸ର৅֎
  7. 23.

    @xxChildͷୈೋҾ਺ ᶃ • @xxChild͸ɺ
 ngOnInit Ͱ༗ޮʹͳΔ৔߹ͱɺ
 ngAfterViewInit / ngAfterContentInit Ͱ༗ޮʹͳΔ৔߹

    ͕ଘࡏ͍ͯ͠Δ • ྫ͑͹ɺcomponent.ts͕Լهͷ࣌ • foo͸ngOnInit()Ͱ༗ޮʢ੩తʣ • foo͸ngAfterViewInit()·Ͱ༗ޮʹͳΒͳ͍ʢಈతʣ
 
 @ViewChild(“foo”) foo: ElementRef; <div foo></div> <div foo *ngIf="showing"></div>
  8. 24.

    @xxChildͷୈೋҾ਺ ᶄ • v8Ͱ͸ɺม਺એݴͷࡍʹɺ੩త͔ಈత͔Λ໌ࣔతʹࢦఆ͢Δ͜ͱ͕ඞཁʹͳͬͨ • ੩తʢngOnInitͰ༗ޮʣ => { static :

    true } • ಈతʢngAfterViewInitͰ༗ޮʣ => { static : false } • جຊతʹ͸ɺʢng update͢ΔͱʣCLI͕Կͱ͔ͯ͘͠ΕΔͷͰɺώτ͕ରԠ͢Δ ඞཁ͸ͳ͍ • CLI͕ରԠͰ͖ͳ͔ͬͨ৔߹͸ɺ
 /* TODO: add static flag */ ͱ͍͏ίϝϯτ͕෇Ճ͞ΕΔʁ • v9Ͱ͸ɺ { static : false } ͸লུՄೳʹͳΔ༧ఆͱͷ͜ͱ