角度库模块在未导入的情况下加载

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方法。