angular - Ingångspunkt @example/ng-bootstrap/core som krävs av @example/ng-bootstrap/src/lib/badge finns inte. - NX

Jag har byggt ett Angular-komponentbibliotek i ett NX-arbetsutrymme. I flera veckor har jag kämpat med att få mitt Angular-bibliotek att fungera ordentligt. Biblioteket innehåller ungefär 50 komponenter med deras respektive modul. Jag har ställt en liknande fråga för en tid sedan, men kunde fortfarande inte lösa problemet. Däremot har jag mer information.

Till förrätt

Alla sidor i min applikation laddas lat. Varje sida demonstrerar en komponent från biblioteket. Men bara för att jag använder BsNavbarModule i min AppComponent och laddar BsNavbarModule i AppModule, hamnar javascript-delar från alla andra komponenter i biblioteket i mitt huvudpaket.

Alla block i rött ska inte vara i huvudpaketet och används endast på sidor som laddas på begäran. Den totala storleken på huvudpaketet är 850 kB.

Felsökning

SCSS

I min tidigare fråga föreslog någon att detta beror på att jag använder SCSS i mina komponenter så här:

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";
}

Men att kommentera ut :host ::ng-deep överallt får mig inte att bli av med JavaScript-delarna i huvudpaketet, så det är inte den lösning jag letar efter.

Lägger till komponenter

Den totala storleken på mitt huvudpaket brukade vara 650 kB. Men att lägga till komponenter till biblioteket ökade huvudpaketet med hisnande 200 kB upp till 860 kB.

En ansökan, inget bibliotek

Att flytta alla komponenter till applikationen och ta bort biblioteket ger mig något helt annat. Att göra det minskar huvudpaketet till 400 kB.

Använd istället Angular-arbetsyta

Det verkar som att Angular-arbetsytor nu tillåter dig att referera till ett bibliotek från ett annat bibliotek, så jag testade det också. Resultaten är desamma, JavaScript-bitar från olika håll hamnar i huvudpaketet bara för att jag använder en komponent från biblioteket i AppComponent.

Ta bara bort all komponent SCSS

Jag har kommenterat ut all SCSS i bibliotekskomponenterna. Detta påverkar inte resultatet på något sätt. Huvudpaketet är fortfarande större än 800 kB.

Den verkliga lösningen

Hittills har det blivit uppenbart att detta inte har något att göra med SCSS, utan snarare med det faktum att komponenterna finns i ett bibliotek. Att använda en komponent från biblioteket bundlar hela biblioteket i huvudpaketet. Samma fenomen förklaras, demonstreras och potentiellt löses här.

Så jag har lagt till en ng-package.json i mappen för varje komponent:

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/badge/index.ts

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

och omstrukturerade koden för att använda denna ingångspunkt istället för ../../..

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

Men arbetsytan kommer inte att kompilera nu. Jag har reducerat koden till det absolut minsta (separat gren) med informationen som samlats från den tidigare länken, och ändå bygger inte projektet, utan ger istället detta fel:

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

Vad gör jag fortfarande fel? Är ng-packagr inte kapabel att bestämma byggordningen för ingångspunkterna?

Svar #1

Problem löst

Dokumentation

Mappen för sub-entrypoints MÅSTE vara bredvid src-mappen.