วิธีอัพเดต NativeScript ไปใช้ Angular 4

Angular นั้นเดินหน้าเต็มที่ไม่ยอมแพ้ฝั่ง React เลยทีเดียว ล่าสุดทีมพัฒนา Angular ประกาศเวอร์ชั่น 4.0 แล้ว (เพิ่ง 2.0 มาไม่นานเอ๊ง) ซึ่ง Framework ทำแอพ iOS และ Android แบบ Cross-Platform อย่าง NativeScript และ Ionic 2 ก็ออกตัวอัพเดตกันถ้วนหน้า

ในที่นี้เราจะพูดถึงการอัพเดตโปรเจคของ NativeScript อย่างเดียวนะ

ถ้าสนใจเริ่มต้นอย่างมั่นใจ ทำ Mobile App แบบ Native ด้วยภาษาเว็บ และ NativeScript คลิกดูรอบสอนสดได้ที่นี่ หรือโทรติดต่อ 083-071-3373 เพื่อจัดอบรมให้ทีมโดยตรงครับ

วิธีอัพเดตโปรเจค NativeScript ไปใช้ Angular 4

ชั้นตอนการอัพเดตไปใช้ Angular 4 มีดังนี้

1. อัพเดต Node Module

ให้แทนที่ส่วนของ dependencies  และ devDependencies  ด้วยรายชื่อ Node Module ชุดใหม่ดังนี้

"dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/router": "4.0.0",
    "nativescript-angular": "~1.5.0",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.2.0",
    "tns-core-modules": "^2.5.2",
    "zone.js": "~0.8.5"
  },
  "devDependencies": {
    "babel-traverse": "6.23.1",
    "babel-types": "6.23.0",
    "babylon": "6.16.1",
    "lazy": "1.0.11",
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "^0.3.5",
    "typescript": "~2.1.0"
  }

2. แก้ไขโค้ดใน app.module.ts

ปรับแก้ไขโค้ดในไฟล์ app.module.ts  จาก

import { NativeScriptModule } from "nativescript-angular/platform";

เป็น

import { NativeScriptModule } from "nativescript-angular/nativescript.module";

3. ใช้ <ng-template> แทน <template>

ใน Angular 4 นั้น NativeScript ยกเลิกการใช้ <template>  และใช้ <ng-template>  แทน

เวลารันตัวแอพพลิเคชั่น หาก NativeScript พบว่ามีการใช้ <template> ในโปรเจค จะมีข้อความแจ้งเตือนดังนี้

The <template> element is deprecated. Use <ng-template> instead.

ก็ให้ไปปรับแก้จากตัวเดิม มาใช้ตัวใหม่ได้

สรุปการปรับมาใช้ Angular 4 ของ NativeScript

สังเกตว่า NativeScript ปรับมาใช้ Angular 4 นั้นไม่มีการเปลี่ยนแปลงมากอย่างที่คาดคะเนไว้ตั้งแต่แรก เป็นเพราะโครงสร้างของ Angular 2 และ Angular 4 ไม่แตกต่างกันมากเท่าไหร่

และ NativeScript เองก็เผชิญปัญหาการเปลี่ยนจาก Angular 1 มาเป็น Angular 2 นานแล้ว เลยมีประสบการณ์ ออกแบบโครงสร้างของโปรเจครองรับการเปลี่ยนเวอร์ชั่นได้ดีขึ้น

เอาเป็นว่าถ้าใครใช้ NativeScript มาตั้งแต่เวอร์ชั่นแรกๆ กับโค้ชพล ก็ปรับตามนี้นะ ใครที่เพิ่งเริ่มใช้หลังวันที่ 28 มีนาคม 2560 ก็สบายใจได้ เพราะ NativeScript ปรับทุกอย่างไว้ให้เรียบร้อย

ไว้มาอัพเดตกันใหม่ แต่ถ้าสนใจเรียน NativeScript กับโค้ชพล คลิกดูรายละเอียดได้ที่นี่

อ้างอิง – NativeScript