HOW-TO：Angular 库分为独立的特征子库

Question

我目前正在开发一个 Angular 库（在Angular v 8.1.0 中）并想知道如何将它“拆分到不同的子库中”？

例如，Angular ( @angular) 以某种方式拆分为不同的“部分”，例如：

• @angular/common
• @angular/core
• @angular/forms
• 等等。

例如，@angular/common有不同的子目录可供导入：

• @angular/common/http
• @angular/common/locale
• @angular/common/testing

我想知道如何在我自己的 Angular 库中进行这种结构化，以保持不同的上下文元素彼此独立。假设我的库被调用，cool-lib并且有不同的功能模块包含它们自己的服务/组件/等：common, featureA, featureB.

我想实现这样的目标：

import { CommonService } from 'cool-lib/common';
import { FeatAComponent, FeatAService } from 'cool-lib/feature-a';
import { FeatBModule } from 'cool-lib/feature-b';

而不是：

import { 
  CommonService, 
  FeatAComponent, 
  FeatAService,
  FeatBModule
} from 'cool-lib';

甚至能够独立地改变不同功能模块的版本号，或者只安装那些将需要的模块而不必安装整个库（假设我只需要featureA）也很好。

例如，在我的package.json 上：

{
  "dependencies": {
    "cool-lib/common": "1.0.0",
    "cool-lib/feature-a": "1.0.0",
    "cool-lib/feature-b": "1.3.0"
  }
}

要不就：

{
  "dependencies": {
    "cool-lib/feature-a": "1.0.0"
  }
}

代替：

{
  "dependencies": {
    "cool-lib": "1.0.0"
  }
}

到目前为止，我已经阅读了很多关于创建 Angular 库的内容，但是找不到这个特定的用例，因为它们都只涵盖了在 npm 上创建和发布它们的基本知识......所以非常欢迎对此提供任何帮助！

Answer 1

Angular 已经支持多个开箱即用的子库。

默认的项目结构包含一个“app”应用程序，它是一个常规的 Angular 项目，然后你添加额外的子库，即 Angular 库项目。有放置在library子文件夹中。

一个 Angular 项目可以包含多个子库项目。

每个子库项目都可以作为单独的 npm 包发布，因为它们有自己的package.json文件。

npm 支持称为作用域包名称的东西。这允许您将包命名为包的范围@angular/core在哪里@angular。

您可以像这样将作用域库添加到当前的 Angular 项目中。

ng generate library @my-scope/my-library

从范围项目导入时，它必须以范围为前缀。

例如;

ng generate library @my-scope/my-library

上面的name@cool-lib是作用域，common是npm包的名字。

使用范围可以让你做两件基本的事情（据我所知）。

1. 防止与其他包的名称冲突，例如@cool-lib/animations不会与@angular/animations
2. 将包组织成 node_modules/@cool-lib