Angular5.2からAngular6に移行したのでメモ
移行手順
https://update.angular.io/
で示されることをひたすらやっていく
Angular Version
5.2 -> 6.0App Complexity
BasicngUpgrade
I use ngUpgrade noPackage 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する場合
これは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 });
- global is not definedが出る問題
https://github.com/angular/angular-cli/issues/8160
global-shim.ts
(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のコンポーネントって少ないなーと思ってたんですが、 探したらそこそこあるんですね。
中でもすごいのがコレ
でもAngularって極力materialとかAngular Teamが提供しているもの以外依存しないほうがいろいろと幸せになれそうな気がする…
ちなみに僕はngx-bootstrapを使っています。
おまけ
Angular5からAngular6に移行した小さなサンプルを置きました
