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

- Emiliano S.

---

你应该使用 npm link 命令安装本地库，而不是 npm install 命令。文档：https://docs.npmjs.com/cli/link.html - Edric

我们不能在tsconfig.json文件的路径部分中设置路径，例如："paths": { "components-library": [ "../my-components-library/projects/components-library" ] } - Siddharth Pal

嗨，你需要构建你的库，创建一个包并将该包安装到你的主模块中，这就是库的工作原理。如果你需要更多细节，请告诉我，我会为你提供。 - Sethuraman

Answer 1

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

• 在本地库运行 npm link
• 在主机应用程序中运行 npm link @local-library-name
• 但请确保您在主机应用程序的 angular.json 文件上进行以下更改。如果您使用的是较旧版本的 Angular 11 或更低版本，则添加 "preserveSymlinks": true；否则，将 sourceMap 中的 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
            },

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

• 在你的库中运行npm pack
• 在主应用程序中运行npm i your-library-path.tgz
• 或者你可以在主应用程序的package.json文件中更新新的依赖，然后运行npm i

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

- deepakchethan

---

Angular 14 没有"sourceMap"选项。 - Vortilion

preserveSymlinks 对我来说在 Angular 13 上也很好用。 - Vignesh

Answer 2

需要在 angular.json 文件中进行注册。

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

在您想使用库的组件中，在 @Component({...}) 之前，需要将其声明为 const。

``` declare const YourComponentLibraryName: any; ```

- razvanstan