angular - 入口點 @example/ng-bootstrap/core（被 @example/ng-bootstrap/src/lib/badge 所需要）不存在。 - NX

我在 NX 工作區中建立了一個 Angular 元件庫。幾個星期以來，我一直在努力讓我的 Angular 庫正常運作。該庫包含大約 50 個元件以及它們各自的模組。我之前曾經問過類似的問題，但仍然無法解決問題。不過，我確實有更多的資訊。

作為開胃菜

我應用程式中的所有頁面都是延遲加載的。每個頁面都展示了庫中的一個元件。但僅僅因為我在 AppComponent 中使用了 BsNavbarModule，並且在 AppModule 中加載了 BsNavbarModule，庫中其他元件的 JavaScript 代碼塊仍然會出現在我的主程式包中。

所有紅色區塊不應包含在主包中，僅用於延遲加載的頁面。主包的總大小為 850 kB。

故障排除

SCSS

在我之前的問題中，有人建議這是因為我在我的組件中像這樣使用 SCSS：

徽章.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 並不能讓我擺脫主包裡的 JavaScript 片段，所以這不是我正在尋找的解決方案。

添加元件

我的主要套件的總大小原本是 650 kB。但將元件加入到庫後，主要套件增加了驚人的 200 kB，達到 860 kB。

一個應用程式，沒有庫

將所有組件移動到應用程式並移除庫，給了我完全不同的結果。這樣做可以將主包減小到 400 kB。

改用 Angular 工作區

看起來 Angular 工作區現在允許你從另一個庫引用一個庫，所以我也測試了這個。結果是一樣的，只因為我在 AppComponent 中使用了庫的一個組件，來自各處的 JavaScript 塊最終都會出現在主捆綁包中。

只需移除所有組件 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/badge/index.ts

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

並重構了代碼以使用此入口點，而不是 ../../..

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

然而，現在工作區無法編譯。我已經將代碼縮減到最基本的部分（獨立分支），並使用之前鏈接中收集的信息，但項目仍然無法構建，而是出現以下錯誤：

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 無法決定入口點的構建順序嗎？

答案＃1

問題解決

文件資料

子進入點的資料夾必須位於 src 資料夾旁邊。