角度庫模塊在未導入的情況下加載

Question

我正在嘗試使用本地庫（由Angular CLI創建）在項目之間共享組件。 我已經構建了庫，以便它擁有多個模塊，每個模塊都有自己的組件，服務和共享邏輯。

我在庫中的每個模塊的消費項目中都有一個包裝模塊。 這些本地模塊是延遲加載的，AFAIK是為庫模塊啟用延遲加載的唯一方法。 我可以懶得加載這些本地模塊沒有問題，一切正常，庫組件加載和正確渲染，沒有任何錯誤。

問題是，一旦加載了庫中的模塊，它不僅會加載該特定模塊，還會加載庫中的其他模塊，即使我沒有在我的消費項目中導入它們。

如何設置它以便僅加載此特定模塊？ 似乎沒有樹正在搖晃。

這就是文件夾結構的樣子：

├── projects
│   ├── project1
│   ├── project2
│   └── lib
│       ├── src
│       │   ├── lib
│       │   │   ├── widgets  (module1)
│       │   │   ├── blobs    (module2)
│       │   │   └── lib.module.ts
│       │   └── public-api.ts

此庫中的每個模塊都有自己的public-api.ts文件，其中包含此模塊的導出。 對於我的WidgetsModule這將是：

export { WidgetsModule } from './widgets.module';

export { Importance } from './enums/importance.enum';
export { BlockItem } from './interfaces/block-item.interface';
export { WidgetConfig } from './interfaces/widget-config.interface';
export { Link } from './interfaces/link.interface';

庫的主要public-api.ts文件結合了所有這些導出：

export * from './lib/widgets/public-api';
export * from './lib/blobs/public-api';

BlobsModule是一個測試模塊，它在組件中保存一個非常大的JSON blob以增加頁面大小 - 僅用於調試目的。

在我的消費項目中，我像這樣導入WidgetsModule ：

// widgets-wrapper.module.ts - This local module file is being lazy loaded
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WidgetsModule } from 'lib'; // This is the library, I import *only* the WidgetsModule

import { WidgetsWrapperRoutingModule } from './widgets-routing.module';

@NgModule({
  declarations: [...],
  imports: [CommonModule, WidgetsWrapperRoutingModule, WidgetsModule], // I import it
  exports: [...]
})
export class WidgetsWrapperModule {}

在整個項目中，我對我的BlobsModule有0個引用。 WidgetsModule對我的BlobsModule有0個引用或依賴BlobsModule 。 然而，當我瀏覽到延遲加載WidgetsWrapperModule的頁面時，我可以在Chrome網絡選項卡中看到BlobsModule ，包括巨大的JSON blob，也正在下載。 當我在這個庫中有30多個模塊時，我可以看到這個結尾很糟糕。 當我只需要一個小模塊時，我不想加載它們。

也許Angular的內置庫支持無法做到這一點？ 我是否必須切換到例如ng-packagr才能按照我想要的方式工作？

更新：

運行“ng serve project1”（使用該庫）會生成以下塊： widgets-widgets-module.js 。 這個塊包含WidgetsModule和BlobsModule的代碼，我真的不認為應該發生這些代碼？

運行“ng serve project1 --prod”會從塊中刪除BlobsModule ，這是我所期望的，所以這很好。

但是，當在項目中創建一個延遲加載BlobsModule的新路由時，會生成以下塊（在dev和prod中）： widgets-widgets-module.js ， blobs-blobs-modules.js和default~blobs-blobs-module~widgets-widgets-module.js 。

widgets-widgets-module.js和blobs-blobs-module.js都只包含其模塊代碼的一小部分。 default~blobs-blob-module~widgets-widget-module.js占據最大的部分，包括巨大的JSON blob。 一旦延遲加載模塊開始加載，就會加載這個巨大的塊，導致大多數代碼（以及BlobsModule的巨大JSON blob）在加載任何模塊時被加載，導致相同問題。

在生產版本中，這個長命名的塊正在重命名為5.xxxxxxx.js ，所以我不認為這是常見的塊，因為該文件名應該以0開頭。我也沒有在任何地方使用或引用BlobModule除了它的'路線之外，所以沒有理由將它移動到一個共同的塊。

Answer 1

我已經更改了庫以使用ng-packagr作為構建工具。 現在一切都按預期工作：所有延遲加載工作，只加載所需的模塊，並且代碼塊沒有奇怪的組合發生。

這些更改實際上是最小的：庫中的每個模塊現在都有自己的package.json文件，其中包含：

// projects/lib/src/lib/widgets/package.json
{
  "name": "lib/widgets",
  "version": "0.0.1",
  "private": true,
  "ngPackage": {
    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
    "lib": {
      "entryFile": "public-api.ts"
    },
    "dest": "../../../../../dist/lib/widgets"
  }
}

並且我用於構建庫的主package.json中的更改：

// old
{
  ...
  "scripts": {
    "build": "ng build",
    ...
}

// new
{
  ...
  "scripts": {
    "build": "ng-packagr -p ./projects/lib/src/lib/widgets/package.json",
    ...
}

（必須為庫文件夾中的每個模塊運行上面的構建命令，我已經為我創建了一個單獨的腳本）

最后，我的消費項目中的導入也已更新：

// widgets-wrapper.module.ts

// old
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WidgetsModule } from 'lib'; // <-- This

...

// new
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WidgetsModule } from 'lib/widgets'; // <-- To this

...

一切都完美無瑕。 我仍然困惑為什么使用Angular CLI的默認設置不起作用。 我可能只是忽略了一些東西，所以我現在暫時打開這個問題 - 我想在不使用ng-packagr的情況下返回Angular方法。