如何在 Angular 中包含本地库？

Question

在创建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 找不到该模块。

Answer 1

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

• npm link在本地库中运行
• npm link @local-library-name在主机应用程序中运行
• 但请确保对主机应用程序angular.json文件进行以下更改。如果您使用小于 11 或更低的角度，则添加"preserveSymlinks": trueelsesourceMap和scripts, styles,vendor作为 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。

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

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

Answer 2

需要在angular.json中注册

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

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

declare const YourComponentLibraryName: any;