angular - จุดเริ่มต้น @example/ng-bootstrap/core ซึ่งต้องการโดย @example/ng-bootstrap/src/lib/badge ไม่มีอยู่ - NX

ฉันได้สร้างไลบรารีคอมโพเนนต์ Angular ในพื้นที่ทำงาน NX มาหลายสัปดาห์แล้วฉันกำลังประสบปัญหาในการทำให้ไลบรารี Angular ของฉันทำงานได้อย่างถูกต้อง ไลบรารีนี้มีคอมโพเนนต์ประมาณ 50 ตัวพร้อมโมดูลที่เกี่ยวข้อง ฉันเคยถามคำถามคล้าย ๆ กันไปเมื่อไม่นานมานี้ แต่ก็ยังไม่สามารถแก้ปัญหาได้ อย่างไรก็ตามฉันมีข้อมูลเพิ่มเติม

สำหรับเริ่มต้น

ทุกหน้าภายในแอปพลิเคชันของฉันเป็นแบบโหลดช้า แต่ละหน้าจะแสดงส่วนประกอบจากไลบรารี แต่เพียงเพราะฉันกำลังใช้ BsNavbarModule ใน AppComponent ของฉันและโหลด BsNavbarModule ใน AppModule ชิ้นส่วนจาวาสคริปต์จากส่วนประกอบอื่นทั้งหมดในไลบรารีกำลังถูกรวมอยู่ในบันเดิลหลักของฉัน

ชิ้นส่วนทั้งหมดที่เป็นสีแดงไม่ควรอยู่ในบันเดิลหลักและใช้เฉพาะบนหน้าที่โหลดแบบขี้เกียจ ขนาดรวมของบันเดิลหลักคือ 850 kB

การแก้ไขปัญหา

SCSS

ในคำถามก่อนหน้านี้มีคนแนะนำว่านี่เป็นเพราะฉันกำลังใช้ SCSS ในคอมโพเนนต์ของฉันแบบนี้:

badge.component.scss

:host ::ng-deep {
    // Configuration
    @import "~bootstrap/scss/functions";
    @import "~bootstrap/scss/variables";
    @import "~bootstrap/scss/mixins";

    // Layout & components
    @import "~bootstrap/scss/badge";
}

อย่างไรก็ตาม การคอมเมนต์เอา :host ::ng-deep ทุกที่ไม่ได้ทำให้ฉันกำจัดชิ้นส่วนจาวาสคริปต์ในแพ็กเกจหลักได้ ดังนั้นนั่นไม่ใช่วิธีแก้ปัญหาที่ฉันกำลังมองหา

การเพิ่มชิ้นส่วน

ขนาดรวมของแพ็กเกจหลักของฉันเคยอยู่ที่ 650 kB แต่การเพิ่มคอมโพเนนต์เข้าไปในไลบรารีทำให้แพ็กเกจหลักเพิ่มขึ้นอย่างมหาศาล 200 kB จนเป็น 860 kB

แอปพลิเคชันหนึ่ง ไม่มีไลบรารี

การย้ายส่วนประกอบทั้งหมดไปยังแอปพลิเคชันและลบไลบรารี ทำให้ฉันได้สิ่งที่แตกต่างออกไปโดยสิ้นเชิง การทำเช่นนี้จะลดขนาดบันเดิลหลักลงเหลือ 400 kB

ใช้พื้นที่ทำงานของ Angular แทน

ดูเหมือนว่าตอนนี้ Angular workspaces อนุญาตให้คุณอ้างอิงไลบรารีจากไลบรารีอื่นได้ ดังนั้นฉันจึงทดสอบสิ่งนั้นด้วย ผลลัพธ์ก็เหมือนเดิม ชิ้นส่วน JavaScript จากทุกที่รวมกันอยู่ใน bundle หลักเพียงเพราะฉันใช้คอมโพเนนต์หนึ่งจากไลบรารีใน AppComponent

แค่ลบ SCSS ของคอมโพเนนต์ทั้งหมด

ฉันได้คอมเมนต์ออก SCSS ทั้งหมดในส่วนประกอบของไลบรารีแล้ว สิ่งนี้ไม่ได้ส่งผลต่อผลลัพธ์แต่อย่างใด แพ็กเกจหลักยังคงมีขนาดใหญ่กว่า 800 kB

ทางออกที่แท้จริง

จนถึงจุดนี้มันชัดเจนแล้วว่าสิ่งนี้ไม่มีความเกี่ยวข้องกับ SCSS แต่เกี่ยวกับข้อเท็จจริงที่ว่าส่วนประกอบเหล่านี้อยู่ภายในไลบรารี การใช้ส่วนประกอบหนึ่งจากไลบรารีจะรวมทั้งไลบรารีเข้าสู่บันเดิลหลัก ปรากฏการณ์เดียวกันนี้ถูกอธิบาย แสดงตัวอย่าง และอาจแก้ไขได้ที่นี่

ดังนั้นฉันได้เพิ่ม ng-package.json ลงในโฟลเดอร์ของแต่ละคอมโพเนนต์:

src/lib/badge/ng-package.json

{
    "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
    "dest": "../../../../../dist/libs/example-ng-bootstrap",
    "lib": {
      "entryFile": "index.ts"
    }
}

src/lib/ป้าย/index.ts

export * from './badge.component';
export * from './badge.module';

และปรับโค้ดใหม่ให้ใช้จุดเริ่มต้นนี้แทน ../../..

import { BsBadgeModule } from '@example/ng-bootstrap/badge';

อย่างไรก็ตาม ตอนนี้ workspace ไม่สามารถคอมไพล์ได้ ผมได้ลดโค้ดให้เหลือแค่ขั้นต่ำสุด (สาขาแยก) ด้วยข้อมูลที่รวบรวมจากลิงก์ก่อนหน้า และโปรเจกต์ก็ยังคงสร้างไม่ได้ แต่กลับให้ข้อผิดพลาดนี้แทน:

npm run build -- --skip-nx-cache --configuration production --source-map

> [email  build
> nx build "--skip-nx-cache" "--configuration" "production" "--source-map"


   ×    1/4 dependent project tasks failed (see below)
   √    3/4 dependent project tasks succeeded [0 read from cache]

 —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————


> nx run mintplayer-ng-bootstrap:build:production

Building Angular Package

 >  NX   Entry point @mintplayer/ng-bootstrap/core which is required by @mintplayer/ng-bootstrap/src/lib/badge doesn't exists.

   Pass --verbose to see the stacktrace.


 ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 

 >  NX   Ran target build for project ng-bootstrap-demo and 4 task(s) it depends on (7s)

         With additional flags:
           --source-map=true

    ×    1/4 failed

 >  NX   Entry point @mintplayer/ng-bootstrap/core which is required by @mintplayer/ng-bootstrap/src/lib/badge doesn't exists.

   Pass --verbose to see the stacktrace.


 ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 

 >  NX   Ran target build for project ng-bootstrap-demo and 4 task(s) it depends on (6s)

         With additional flags:
           --source-map=true

    ×    1/4 failed
    √    3/4 succeeded [0 read from cache]

   View structured, searchable error logs at https://nx.app/runs/IAaoSSkobF

ฉันยังทำอะไรผิดอยู่หรือเปล่า? ng-packagr ไม่สามารถกำหนดลำดับการสร้างของ entrypoints ได้หรือ?

คำตอบ #1

ปัญหาได้รับการแก้ไขแล้ว

เอกสาร

โฟลเดอร์สำหรับจุดย่อยของการเข้า ต้อง อยู่ถัดจากโฟลเดอร์ src