ลูกผสม AngularJS + Angular (v6) (ในที่สุด!)

ลูกผสม AngularJS + Angular (v6) (ในที่สุด!)

ในที่สุดก็ถึงเวลาที่จะทำให้สิ่งนี้เกิดขึ้น! ฉันใช้งานและดูแลเว็บไซต์มาประมาณ 2.5 ปีแล้ว เว็บไซต์นี้สร้างด้วย AngularJS (v1.6.9) วิธีนี้ใช้งานได้ดีพอสมควร แต่ไม่มีอะไรเทียบได้กับ Angular เวอร์ชันใหม่กว่า ในที่สุดฉันก็ได้เริ่มก้าวแรกเพื่อย้ายทุกอย่างไปเป็นเวอร์ชันใหม่ทีละน้อย นี่คือวิธีที่ฉันทำ:

1. สร้างโครงการ Angular CLI ใหม่
2. คัดลอกและแปลงไฟล์ JavaScript ทั้งหมดเป็น TypeScript
3. การแทนที่ URL เทมเพลตที่สมบูรณ์ด้วย URL ที่เกี่ยวข้อง
4. ปรับแต่งการตั้งค่า Angular CLI เพื่อรองรับ AngularJS
5. รวม AngularJS ในแอป Angular ของคุณ

สร้างโครงการ Angular CLI ใหม่

เนื่องจากไม่มีใครต้องการสร้างวงล้อขึ้นมาใหม่ ให้ทำตามคำแนะนำ “อย่างเป็นทางการ” นี้เพื่อสร้างโปรเจ็กต์ใหม่: https://angular.io/guide/quickstart

คัดลอกและแปลงไฟล์ JavaScript ทั้งหมดเป็น TypeScript

นี่อาจดูเหมือนเป็นเรื่องง่าย ซึ่งมันก็เป็น... ในตอนแรก แต่มีอะไรที่มากกว่าแค่การเปลี่ยนนามสกุลไฟล์ หากต้องการเปลี่ยนชื่อไฟล์ทั้งหมดจาก ".js" เป็น ".ts" คุณสามารถทำทุกอย่างที่คุณต้องการ คุณสามารถทำได้ด้วยตนเองโดยใช้ส่วนขยาย NPM หรือผ่านทาง Terminal ของคุณ ฉันเลือกใช้ส่วนขยาย NPM: Renamer หากคุณต้องการใช้แบบเดียวกัน ให้ทำตามคำสั่งถัดไป:

npm i -g renamer

และหากต้องการเปลี่ยนชื่อไฟล์จริง:

renamer --find '.js' --replace '.ts' 'root/folder/of/app/**/*.js'

นี่จะเปลี่ยนชื่อไฟล์ JavaScript ทั้งหมดของคุณเป็นไฟล์ TypeScript ถัดไป หากคุณยังไม่ได้ทำงานกับ ES6/ES2015 คุณจะต้องแปลง Javascript ของคุณเป็นรูปแบบนี้ TypeScript ไม่ทำงานกับฟังก์ชันที่ไม่ใช่ลูกศร นอกจากนี้ คุณจะต้องเริ่มใช้คำสั่ง "นำเข้า" และ "ส่งออก" ของ JavaScript แทน "ต้องการ" สิ่งนี้จะช่วยให้ Webpack (ในตัวด้วย Angular CLI) สร้างแอปพลิเคชันของคุณในภายหลัง

เมื่อคุณเปลี่ยนชื่อและเขียนโค้ดของคุณใหม่แล้ว คุณสามารถคัดลอกสิ่งนี้ลงในโปรเจ็กต์ Angular CLI ที่คุณสร้างไว้ก่อนหน้านี้ได้ ทำตามคำแนะนำต่อไปนี้ตั้งแต่ "สร้างห่วงโซ่การนำเข้า" จนกว่าคุณจะไปถึง "กำหนดค่า Angular CLI": "การสร้างไฮบริด" ณ จุดนี้ คุณควรมีไฟล์ทั้งหมดในรูปแบบ TypeScript และรวมเข้ากับโปรเจ็กต์ Angular CLI “ใหม่” ของคุณ

การแทนที่ URL เทมเพลตที่สมบูรณ์ด้วย URL ที่เกี่ยวข้อง

ณ จุดนี้ คุณสามารถเริ่มคอมไพล์แอปของคุณได้แล้ว แต่คุณจะพบข้อผิดพลาดหากคุณใช้ URL เทมเพลตที่สมบูรณ์เหมือนกับฉัน Angular CLI ใช้ Webpack เพื่อคอมไพล์ไฟล์ TypeScript ลงใน Javascript จากนั้นจึงรวมเป็นบันเดิล Webpack ต้องการให้คุณใช้เส้นทางสัมพันธ์ ตอนนี้แทนที่พาธเทมเพลตสัมบูรณ์ทั้งหมดของคุณด้วยพาธแบบสัมพันธ์ สิ่งเหล่านี้อาจอยู่ในคำสั่ง (หรือส่วนประกอบ) เราเตอร์ของคุณ หรือตัวควบคุมใดๆ

ปรับแต่งการตั้งค่า Angular CLI เพื่อรองรับ AngularJS

ณ จุดนี้ คุณจะสามารถคอมไพล์แอปไฮบริดของคุณได้อย่างสมบูรณ์ แต่เพื่อวัตถุประสงค์ในการพัฒนาเท่านั้น เมื่อคุณพยายามรวบรวมแอปของคุณด้วยแฟล็กที่ใช้งานจริง:

ng build --prod

คุณจะไม่สามารถโหลดแอปในเบราว์เซอร์ของคุณได้ เนื่องจาก Webpack จะพยายามแก้ไขฟังก์ชันทั้งหมดเพื่อคอมไพล์ให้เป็น Javascript พื้นฐาน สิ่งนี้ใช้ได้กับ Angular (v6) แต่ไม่ใช่สำหรับ AngularJS หากต้องการแก้ไขปัญหานี้ ให้แก้ไขการตั้งค่าต่อไปนี้ในไฟล์ “เชิงมุม.json”:

/*This is the old situation*/
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "serviceWorker": true
  }
}

/*And this is the new situation*/
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": false, //Updated, remove this comment if you copy/paste
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": false, //Updated, remove if copy/paste
    "serviceWorker": true
  }
}

รวม AngularJS ในแอป Angular ของคุณ

คุณเกือบจะเสร็จแล้ว! ขั้นตอนสุดท้ายคือการรวมแอป AngularJS ของคุณไว้ในแอป Angular ใหม่ที่สวยงามของคุณ คุณสามารถทำได้โดยทำตาม “Bootstrap the hybrid” สำหรับคำแนะนำที่ฉันแนะนำไปก่อนหน้านี้: Make the hybrid หากคุณต้องการใช้ส่วนประกอบ Angular ใหม่ในแอป AngularJS ของคุณ ให้ทำตามขั้นตอนต่อไปนี้: "อัปเกรด Angular" คู่มือนี้จะแสดงให้คุณเห็นว่าคุณสามารถใช้ส่วนประกอบ AngularJS ใน Angular ได้อย่างไร แต่ฉันขอแนะนำให้ลองอัปเกรดส่วนประกอบเหล่านี้เป็น Angular (v6) ให้มากที่สุดเท่าที่จะทำได้ พวกเขาจะต้องได้รับการอัปเกรดในบางจุด ดังนั้นนี่จึงเป็นโอกาสที่สมบูรณ์แบบสำหรับมัน!

ตอนนี้คุณสามารถสร้างแอปของคุณเพื่อการใช้งานจริงได้แล้ว! เมื่อคุณแปลงทุกอย่างเป็น Angular (v6) เรียบร้อยแล้ว คุณจะสามารถใช้ AOT และ Build Optimizer ได้อีกครั้ง ทำให้แอปของคุณมีประสิทธิภาพมากยิ่งขึ้น อาจเป็นเพราะฉันทำผิดพลาดในกระบวนการของตัวเอง และนั่นเป็นสาเหตุที่ AOT ไม่ทำงานในขณะนี้ แต่จะต้องรอการแก้ไข

หมายเหตุ

คู่มือนี้ใช้ไม่ได้สำหรับทุกคน ฉันเคยใช้คำแนะนำที่แตกต่างกัน 3 หรือ 4 รายการเป็นการส่วนตัวและค้นหาโดย Google มากขึ้นเพื่อไปยังสถานที่ที่ถูกต้อง การอัปเกรดนี้ไม่ใช่สิ่งที่ง่ายที่สุดที่คุณเคยทำ แต่จะคุ้มค่ามาก มันจะปรับปรุงความเสถียรและความน่าเชื่อถือของแอปของคุณได้มาก นอกจากนี้ยังช่วยแก้ปัญหา SEO ใด ๆ ที่คุณอาจมีกับ AngularJS เนื่องจาก Angular สามารถเรนเดอร์บนเซิร์ฟเวอร์ (โหนด) ได้จริง!

หากคุณมีคำถามหรือข้อเสนอแนะที่ดีกว่าว่าฉันจะทำให้กระบวนการนี้ง่ายขึ้นสำหรับคุณและฉันได้อย่างไร โปรดแสดงความคิดเห็น ฉันยินดีที่จะช่วยเหลือคุณหรือเรียนรู้จากประสบการณ์ของคุณในการอัพเกรดอันเลวร้ายนี้! หากคุณต้องการอ่านเพิ่มเติมเกี่ยวกับการดิ้นรนของฉันกับ Angular และ SEO โปรดดูที่: วิธีจัดทำดัชนีแอปพลิเคชันหน้าเดียวที่สร้างใน AngularJS