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个引用或依赖性。但是，当我浏览到延迟加载WidgetsWrapperModule的页面时，我在Chrome联网标签中看到BlobsModule，包括巨大的JSON blob，也正在下载中。当我在这个库中有30多个模块时，我会看到这种结局很糟糕。我只需要1个微型模块时就不想全部加载它们。

也许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和{ {1}}。

default~blobs-blobs-module~widgets-widgets-module.js和widgets-widgets-module.js都只保留其模块代码的一小部分。 blobs-blobs-module.js占有最大的部分，包括巨大的JSON blob。任何一个延迟加载模块都开始加载时，就会加载这个庞大的块，这导致大多数代码（以及default~blobs-blob-module~widgets-widget-module.js的一部分巨大的JSON blob）都在加载任一模块时被加载，导致同样的问题。

在生产版本中，该长命名的块被重命名为BlobsModule，所以我不认为这是常见的块，因为该文件名应以0开头。我也不使用或引用5.xxxxxxx.js不在其路线的任何其他位置，因此应该没有理由将其移到一个公共块中。

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

Angular库模块已加载而未导入

1 个答案: