如何在 Angular 中包含本地库？

当我创建一个Angular我想构建一个库，我可以在其中放置甚至在其他项目中也有用的组件。为了创建这个库，我做了另一个Angular我在其中生成了库项目并使用工作区中自动生成的应用程序项目来显示各个组件。

ng new my-components-library
cd my-components-library
ng generate library components-library

现在我有一个包含工作组件的库，这些组件通过了单元测试并在附加的应用程序项目中正常工作，但我在项目的工作区中需要它们。我试图以这种方式包含图书馆。

在我的项目工作区中

npm install ../my-components-library/projects/components-library

命令运行正常，我在宿主项目的库中获得了对库的引用package.json但是当我必须使用以下命令将外部库中的模块包含在项目的模块中时import {myModule} from 'components-library'我收到错误，因为 Angular 找不到该模块。

您可以使用npm link，这会在您的主机应用程序的 node_modules 目录中创建一个符号链接。

• Run npm link在当地图书馆
• Run npm link @local-library-name在主机应用程序中
• 但请确保对主机应用程序进行以下更改angular.json文件。如果您使用的角度小于 11 或更低，则添加"preserveSymlinks": true else sourceMap with scripts, styles, vendor as true

    "build": {
      "options": {
        "preserveSymlinks": true, // angular 11 or less
      }
    }, 

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "sourceMap": {     // angular 12 or more
              "scripts": true,
              "styles": true,
              "vendor": true
            },

您可以使用以下命令将库打包到 tar 中npm pack.

• Run npm pack在你的图书馆里
• Run npm i your-library-path.tgz在您的主机应用程序中
• 或者您可以使用主机应用程序的新依赖项更新 package.json 并运行npm i

"your-library-name": "file:your-library-path.tgz",