如何在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
• 但请确保您在主机应用程序 "preserveSymlinks": true 文件中设置了 angular.json：

    "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",

Answer 2

需要在angular.json中注册

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

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

declare const YourComponentLibraryName: any;

Answer 3

您可以创建一个角度库，然后在任意数量的项目中使用它

以下是创建angular2库https://makina-corpus.com/blog/metier/2017/how-to-create-an-angular-library

的方法

使用angular-cli https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e