Gobble up pudding

プログラミングの記事がメインのブログです。

MENU

Angular6に移行メモ

スポンサードリンク

f:id:fa11enprince:20180628144634j:plain
Angular5.2からAngular6に移行したのでメモ

移行手順

https://update.angular.io/
で示されることをひたすらやっていく

  • Angular Version 5.2 -> 6.0

  • App Complexity Basic

  • ngUpgrade I use ngUpgrade no

  • Package Manager npm

Before Updating

httpモジュールからhttpClientモジュールへ

Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don't need to map to json anymore) and now supports typed return values and interceptors. Read more on angular.io

→すでに実施済み

https://brianflove.com/2017/07/21/migrating-to-http-client/

                                                                                               
+import { HttpClient, HttpParams } from '@angular/common/http';                                                       
 import { Injectable } from '@angular/core';                                                                          
-import { Headers, Http, RequestOptions, Response, URLSearchParams } from '@angular/http';                            
+                                                                                                                     
 import { Observable } from 'rxjs/Observable';                                                                        
                                                                                                                      
import 'rxjs/add/observable/throw';                                                                                  
export class HogeService {                                                                                                       
                                                                                                                      
-    constructor(private http: Http) { }                                                                              
+    constructor(private httpClient: HttpClient) { }                                                                  
...                                                                                      
         locationCode: string,                                                                                        
         page: number,                                                                                                
         pageSize: number,                                                                                            
-        optionalParams: URLSearchParams,                                                                             
+        optionalParams: HttpParams,                                                                                  
     ): Observable<IPaginationPage<Hoge>> {                                                                    
-        const params = new URLSearchParams();                                                                                                                                 
-        params.set('size', `${pageSize}`);                                                                           
-        params.set('page', `${page}`);                                                                               
-        if (optionalParams != null && optionalParams.paramsMap.size !== 0) {                                         
-            params.appendAll(optionalParams);                                                                        
-        }                                                                                                            
-        const options = new RequestOptions({ search: params });                                                      
-        return this.http.get(this.hogeAllGetUrl, options).map(this.extractData)                               
+        let params: HttpParams = new HttpParams()                                                                                                                                  
+            .set('size', `${pageSize}`)                                                                              
+            .set('page', `${page}`);                                                                                 
+        optionalParams.keys().forEach((key) => {                                                                     
+            params = params.append(key, optionalParams.get(key));  // 注意:直観に反して戻り値を取らないと変わらない                        
+        });                                                                                                          
+        return this.httpClient.get<IPaginationPage<Hoge>>(this.hogeGetUrl, {params})                
+            .map(this.extractData)                                                                                   
             .catch((error) => Observable.throw(error.statusText));                                                   
     }                                                                                                                

これをやってなかったら多分これが一番大変。

Angular/CLIのアップデート

Update your Angular CLI globally and locally, and migrate the configuration to the new angular.json format by running the following:

npm install -g @angular/cli
npm install @angular/cli@latest
ng update @angular/cli

これで失敗する場合はたぶんNode.jsのバージョンを上げろと言ってきます。

Angularのcoreのアップデート

Update all of your Angular framework packages to v6, and the correct version of RxJS and TypeScript.

ng update @angular/core

Angular Materialのアップデート

After the update, TypeScript and RxJS will more accurately flow types across your application, which may expose existing errors in your application's typings

Update Angular Material to the latest version.

-> 使ってないのでやってない

After the Update

RxJSのlintを入れ替えてRxJSを新バージョンに

Remove deprecated RxJS 6 features using rxjs-tslint auto update rules. For most applications this will mean running the following two commands:

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json # →失敗したが放置

ここからRxJSの直しにかかります。RxJSがバージョンアップしているので書き換えます。

 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';

-import { Observable } from 'rxjs/Observable';
-
-import 'rxjs/add/observable/throw';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/map';
+import { Observable, throwError } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
...
         return this.httpClient.get<IPaginationPage<Hoge>>(this.hogeGetUrl, {params})
-            .map(this.extractData)
-            .catch((error) => Observable.throw(error.statusText));
+            .pipe(
+                map(this.extractData),
+                catchError((error) => throwError(error.statusText)),
+            );
     }

Angular6へあげた効果

ビルド時間早くなった
200秒から60秒
バンドルサイズが減った
main.bundle.jsが1.1MBから800kB

以上で終わり。お疲れさまでした。

その後エラーになったことなど

AjaxでJSONをパラメータとしてPOSTする場合

stackoverflow.com stackoverflow.com これはAngular6の移行というよりhttpModuleからhttpClientModuleへ変えたときに問題になる話

npm installでnode-sassがエラーになる

node_modules\node-sass
> node scripts/install.js

module.js:549
    throw err;
    ^

Error: Cannot find module 'true-case-path'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)

ngx-bootstrapがらみの問題

  • Accordion いつの間にかタイトル文字がクリック可能になってSubmit発火する→使うのやめる
  • Datepicker 下記の問題により、ヘッダの文字が崩れる

https://github.com/valor-software/ngx-bootstrap/issues/4443

// as of Angular 6 they set preserveWhitespaces to false from default.
platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true });
(window as any).global = window;

polyfills.ts

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import 'global-shim';  // workaround
/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
import 'intl';  // Run `npm install --save intl`.

その他気になったこと

全然関係ないが、Angularのコンポーネントって少ないなーと思ってたんですが、 探したらそこそこあるんですね。 github.com

中でもすごいのがコレ github.com

でもAngularって極力materialとかAngular Teamが提供しているもの以外依存しないほうがいろいろと幸せになれそうな気がする…

ちなみに僕はngx-bootstrapを使っています。 valor-software.com

おまけ

Angular5からAngular6に移行した小さなサンプルを置きました github.com