angular-cli โดยที่ไฟล์ webpack.config.js - angular6 ใหม่ไม่รองรับ ng eject

UPDATE: ธันวาคม 2561 (ดูคำตอบของ 'Aniket')

ด้วย Angular CLI 6 คุณต้องใช้ตัวสร้างเนื่องจาก ng eject ถูกเลิกใช้และจะถูกลบออกในเร็ว ๆ นี้ใน 8.0

UPDATE: มิถุนายน 2018: Angular 6 ไม่รองรับ ng eject **

UPDATE: กุมภาพันธ์ 2017: ใช้ ng eject

อัปเดต: พฤศจิกายน 2559: ตอนนี้ angular-cli ใช้เฉพาะ webpack เท่านั้น คุณต้องติดตั้งตามปกติด้วย npm install -g angular-cli "เราเปลี่ยนระบบการสร้างระหว่าง beta.10 และ beta.14 จาก SystemJS เป็น Webpack" แต่จริงๆแล้วฉันใช้ angular-cli เพื่อสร้างโครงสร้างและโฟลเดอร์จากนั้นอีกต่อไปฉันใช้ webpack config ด้วยตนเอง

ฉันได้ติดตั้ง angular cli ด้วยสิ่งนี้:

npm install -g angular-cli@webpack

เมื่อฉันทำงานกับ angular1 และ web pack ฉันเคยแก้ไขไฟล์ "webpack.config.js" เพื่อเรียกใช้งานและปลั๊กอินทั้งหมด แต่ฉันไม่เห็นในโปรเจ็กต์นี้ที่สร้างด้วย angular-cli ว่าใครทำงาน มันคือเวทมนตร์?

ฉันเห็นว่า Webpack กำลังทำงานเมื่อฉันทำ:

ng serve 

"Version: webpack 2.1.0-beta.18"

แต่ฉันไม่เข้าใจวิธีการทำงานของ angular-cli config ...

ด้วย Angular CLI 6 คุณต้องใช้ตัวสร้างเนื่องจาก ng eject ถูกเลิกใช้และจะถูกลบในเร็ว ๆ นี้ใน 8.0 นั่นคือสิ่งที่พูดเมื่อฉันพยายามจะดีดออก

คุณสามารถใช้แพ็คเกจ angular-builders ( https://github.com/meltedspark/angular-builders ) เพื่อกำหนดค่า webpack ที่คุณกำหนดเอง

ฉันได้พยายามสรุปทั้งหมดในบล็อกโพสต์เดียวในบล็อกของฉัน - วิธีปรับแต่งการกำหนดค่าการสร้างด้วยการกำหนดค่า webpack ที่กำหนดเองใน Angular CLI 6

แต่โดยพื้นฐานแล้วคุณเพิ่มการอ้างอิงต่อไปนี้ -

  "devDependencies": {
    "@angular-builders/custom-webpack": "^7.0.0",
    "@angular-builders/dev-server": "^7.0.0",
    "@angular-devkit/build-angular": "~0.11.0",

ในangular.jsonทำการเปลี่ยนแปลงต่อไปนี้ -

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {"path": "./custom-webpack.config.js"},

แจ้งให้ทราบการเปลี่ยนแปลงในตัวสร้างและตัวเลือกใหม่ customWebpackConfig ยังเปลี่ยน

    "serve": {
      "builder": "@angular-builders/dev-server:generic",

สังเกตการเปลี่ยนแปลงตัวสร้างอีกครั้งสำหรับเป้าหมายการแสดงผล โพสต์การเปลี่ยนแปลงเหล่านี้คุณสามารถสร้างไฟล์ชื่อcustom-webpack.config.jsในไดเร็กทอรีรากเดียวกันของคุณและเพิ่มการกำหนดค่า webpackของคุณที่นั่น

อย่างไรก็ตามไม่เหมือนกับการกำหนดค่าng eject ที่ให้ไว้ที่นี่จะรวมเข้ากับการกำหนดค่าเริ่มต้นดังนั้นเพียงเพิ่มสิ่งที่คุณต้องการแก้ไข / เพิ่ม

มีวิธีที่ดีที่จะดีดออกเป็นwebpack.config.jsจากมุม-CLI เพียงแค่เรียกใช้:

$ ng eject

สิ่งนี้จะสร้าง webpack.config.js ในโฟลเดอร์รูทของโปรเจ็กต์ของคุณและคุณสามารถกำหนดค่าได้ตามที่คุณต้องการ ข้อเสียของสิ่งนี้คือสคริปต์ build / start ใน package.json ของคุณจะถูกแทนที่ด้วยคำสั่งใหม่และแทนที่จะเป็น

$ ng serve

คุณจะต้องทำสิ่งที่ชอบ

$ npm run build & npm run start

วิธีนี้ควรใช้ได้กับ angular-cli เวอร์ชันล่าสุดทั้งหมด (โดยส่วนตัวแล้วฉันลองใช้สองสามครั้งโดยที่เก่าที่สุดคือ1.0.0-beta.21และ1.0.0-beta.32.3 ล่าสุด )

จากปัญหานี้เป็นการตัดสินใจในการออกแบบที่ไม่อนุญาตให้ผู้ใช้ปรับเปลี่ยนการกำหนดค่า Webpack เพื่อลดเส้นโค้งการเรียนรู้

เมื่อพิจารณาถึงจำนวนการกำหนดค่าที่มีประโยชน์บน Webpack นี่เป็นข้อเสียเปรียบอย่างมาก

ฉันไม่แนะนำให้ใช้angular-cliสำหรับการใช้งานจริงเนื่องจากมีความเห็นเป็นอย่างมาก

ขณะนี้สามารถนำการกำหนดค่า webpack ของ CLI ออกได้แล้ว ตรวจสอบคำตอบของแอนตัน Nikiforov

เก่า:

angular-cli/addon/ng2/modelsคุณสามารถตัดแม่แบบการตั้งค่าใน ยังไม่มีวิธีอย่างเป็นทางการในการแก้ไขการกำหนดค่า webpack ในตอนนี้

มีปัญหา "ไม่แก้ไข" แบบปิดใน github เกี่ยวกับสิ่งนี้: https://github.com/angular/angular-cli/issues/1656

สิ่งที่ฉันคิดคือการมี webpack จะเป็นเรื่องง่ายเมื่อมีการเปิดตัวการผลิต

FYI: https://github.com/Piusha/ngx-lazyloading

ตามคำแนะนำของng ejectคุณสามารถใช้ได้ngx-build-plus

มีหลายโครงการที่สามารถใช้ร่วมกับรูปแบบการกำหนดค่าใหม่ที่ให้ประโยชน์ของการดีดออกโดยไม่ต้องมีค่าใช้จ่ายในการบำรุงรักษา หนึ่งในโครงการดังกล่าวคือ ngx-build-plus พบได้ที่นี่: https://github.com/manfredsteyer/ngx-build-plus