Cập nhật angular 4 lên angular 6

0
108

Bài viết hôm nay mình sẽ hướng dẫn các bạn cập nhật (upgrade) angular 4 lên angular 6 .Bài viết này mình đúc kết từ kinh nghiệm thực tế của mình.

Yêu cầu trước khi thực hiện :

NodeJS 8+ phải được install vào máy.

Bước 1 : Installing or Updating the Angular CLI to Version 6.

npm install -g @angular/cli

-g có nghĩa là global

hoặc có thể thực hiện uninstall rồi install lại :

npm uninstall -g angular-cli
npm cache clean
npm cache verify   
npm install -g @angular/cli

 

Bước 2 : Upgrading Angular 4|5 Projects

Mở command line (cmd) và di chuyển tới thư mục root của dự án và thực hiện install angular/cli vào local của dự án.

npm install --save-dev @angular/cli@latest

Updating Configuration Files

Có nhiều sự khác biệt giữa angular 4 và 6, chẳng hạn như :

  • Angular 6 sử dụng angular.json thay cho  angular-cli.json.

Thực thi command bên dưới để tự động cập nhật các file cấu hình theo angular 6:

ng update @angular/cli

Kiểm tra Update các package : thực thi tại thư mục root của dự án.

ng update

Kết quả tham khảo image bên dưới :

Upgrading Core Packages to Angular 6

ng update @angular/core

Upgrading RxJS

ng update rxjs

Upgrading @angular/material ( nếu có sử dụng ):

ng update @angular/material

 

Bước 3: Sửa các lỗi sau khi cập nhật lên angular 6.

Sau khi cập nhật lên angular 6 thì mình đã gặp một số lỗi như bên dưới.

#Cập nhật RxJS.

Chuyển bên dưới :

import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of;'

thành :

import { BehaviorSubject, Subject, Observable, of } from 'rxjs';

Tiếp tục chuyển các operator :

import 'rxjs/add/observable/of';	
import 'rxjs/add/operator/catch';	
import 'rxjs/add/operator/do';	
import 'rxjs/add/operator/map';	
import 'rxjs/add/operator/mergeMap';	
import 'rxjs/add/operator/switchMap';

thành :

import { of } from 'rxjs';
import { map, switchMap, catchError, mergeMap } from 'rxjs/operators';

Một số toán tử đã đổi tên :

do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize

Tham khảo thêm tại pipeble operators.

Trường hợp sau khi chỉnh sửa hết rồi mà vẫn còn lỗi từ third-party dependencies thì hãy install package bên dưới, sau khi hết lỗi thì hãy bỏ ra :

npm install --save rxjs-compat

 

#Cập nhật Http thành HttpClient .

Thay đổi nguồn import:

import { Http, ResponseContentType, RequestOptions } from '@angular/http';

thành :

import { HttpClient, HttpResponse, HttpHeaders } from '@angular/common/http';

Thay đổi

Headers–>HttpHeaders

Http –>HttpClient
Chú ý : trường hợp sử dụng append để thêm nội dung vào Headers thì cần chú ý điểm sau.
Source code của hàm append , do vậy để có thể giữ được trị cũ (đã append trước đó) thì cần phải gán lại header mỗi khi gọi append():
append(name: string, value: string|string[]): HttpHeaders {
    return this.clone({name, value, op: 'a'});
}

Ví dụ : trước khi chỉnh sửa có source code như sau :

this.headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append("Authorization", "Bearer " + this._authenService.getLoggedInUser().access_token);

Sau khi chỉnh sửa :

this.headers = new HttpHeaders();
this.headers = this.headers.append('Content-Type', 'application/json');
this.headers = this.headers.append("Authorization", "Bearer " + this._authenService.getLoggedInUser().access_token);

 

#Cập nhật angular material.

Md thay đổi thành Mat

#Cập nhật map thành .pipe(map).

Ví dụ trước khi chỉnh sửa :

this._http.get(SystemConstants.BASE_API + uri, { headers: this.headers }).map (this.extractData);

Sau khi chỉnh sửa :

this._http.get(SystemConstants.BASE_API + uri, { headers: this.headers }).pipe(map(this.extractData));

#Cập nhật bỏ response.json() .

Ví dụ :

private extractData(res) {
    let body = res.json();   
    return body || {};
}

Sau khi chỉnh sửa :

//vì response mặc  định trong angular 6 sẽ trả về json
private extractData(res) {
    return res || {};
}

#Cập nhật liên quan đến package jqwidgets như jqxChart , jqxGrid (nếu có ).

Thêm phần bên dưới vào cuối của  tsconfig.json file :

"styles":[
  "src/styles.css",
  "node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css",
  "node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.bootstrap.css",

],

"include": [
  "src/**/*",
],

  "files": [
  "src/app/app.module.ts",
  "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxchart.ts",
  "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid.ts",
  "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxknob.ts",
  "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxnumberinput.ts",
  "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxtreegrid.ts",
  "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxmenu.ts",
 
]

image sẽ như bên dưới :

Add thêm css vào file styles.css :

còn tiếp…

BÌNH LUẬN

Nhập bình luận của bạn
Vui lòng nhập tên