如何在 Angular 中包含本地库？答案

【问题标题】：How to include a local library in Angular?如何在 Angular 中包含本地库？
【发布时间】：2020-02-10 22:08:57
【问题描述】：

在创建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 命令而不是npm install 命令安装本地库。文档：docs.npmjs.com/cli/link.html
我们不能在 tsconfig.json 中的路径部分设置路径，例如“paths”：{“components-library”：[“../my-components-library/projects/components-library”] }
您好，您需要构建您的库创建一个包并将该包安装到您的主模块这是库的工作原理，如果您需要更多详细信息，请告诉我会为您提供

标签： angular typescript npm

【解决方案1】：

需要在angular.json中注册

"scripts": ["src/assets/scripts/yourComponentLibrary.js"]

在你想要使用库的组件中，需要在@Component({...

declare const YourComponentLibraryName: any;

【讨论】：

【解决方案2】：

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

在本地库中运行npm link
在宿主应用程序中运行npm link @local-library-name
但请确保在主机应用程序angular.json 文件上设置"preserveSymlinks": true：

    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "preserveSymlinks": true,
        "tsConfig": "projects/button/tsconfig.lib.json",
        "project": "projects/button/ng-package.json"
      }
    },

您可以使用`npm pack` 将库打包成tar。

在您的库中运行 npm pack
在您的主机应用程序中运行 npm i your-library-path.tgz
或者您可以使用宿主应用程序的新依赖项更新 package.json 并运行 npm i

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

【讨论】：

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

您可以使用npm pack 将库打包成tar。

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

您可以使用`npm pack` 将库打包成tar。