从本地文件夹或网络文件夹安装 Angular 库

Install Angular library from local folder or network folder

如果我像这样创建一个 angular 库:

ng new libraries-workspace --create-application=false
cd libraries-workspace
ng generate library test-library

现在我构建库

ng build test-library --watch

现在,如果我在一个完全不同的文件夹(远离工作区)中创建一个新的 angular 应用程序

ng new test-project

cd test-project

如何在不发布到 NPM 的情况下引用或安装我的库。所以基本上我想从文件夹安装库

像这样:

ng add test-library c:\libraries-workspace\dist\test-library...

我不想将我的项目添加到工作区文件夹。

谢谢

编辑 07.02.2021:更简单的方法

您可以 link 您的 angular 库直接用于您选择的应用程序,例如你的主要应用程序。为此,请按照下列步骤操作:

  1. 在终端中导航到 angular 库项目的输出目录,然后 运行 命令 npm link。您可能必须触发 ng build 一次,以便输出目录存在。这将使您的图书馆在您的机器上本地可用。
  2. 现在导航到您的主应用程序,其中您的 angular 库用作依赖项,运行 命令 npm link [name_of_your_module]
  3. "preserveSymlinks": true 添加到您的 angular.json 文件中 projects > architect > build
  4. 运行 使用 ng serve 的主应用程序,在库中进行一些更改,然后构建它。根据您的 IDE,您可以创建一个监视任务来触发自动构建。您应该能够看到您的更改。
  5. 最后,如果您完成了对更改的测试,您可以通过在主应用程序的根目录中 运行 命令 npm unlink [name_of_your_module] 取消link 您对主应用程序的依赖。转到您的 angular 库项目目录和 运行 npm unlink 以便您的库不再在本地可用。您现在可以发布更改并在主应用程序中使用 npm install 安装最新版本。

记住它必须是 dist 输出文件夹,因为 angular cli 不支持直接 linking 你的库。您也可以用相同的方式将 link 库添加到其他 angular 库,但是您必须将 "preserveSymlinks": true 添加到您的库的 tsconfig.json

旧答案:

您必须首先打包库的构建输出。为此,您必须在构建输出文件夹中使用 npm pack 命令。 Npm pack 将创建一个包,复制创建包的路径,在终端导航到您的测试项目并点击 npm install "C:\path\to\npm\pack\package"

@sombrerogalaxy 建议了其中一种方法。

然而,使用 npm link 方法的最大缺点是,如果您对库进行任何更改,则需要一次又一次地构建库。
这不是一个非常有效的方法。

我猜,您可能希望在您的 angular 应用程序中立即看到对您的图书馆所做的更改的结果。如果这是预期的行为,您可以按照以下步骤操作。

  • 导航到库工作区并使用 ng build --watchnpm build --watch 构建库项目。此命令将创建一个包含所有库工件的 dist 文件夹。通过这样做,您正在以“监视”模式构建库项目,这样任何代码更改都会立即反映在目标应用程序中。
  • 现在,导航到您的 angular 应用程序并使用命令 npm install C:/some_folder/your_library_root_folder/dist/your_library 安装库。将库路径替换为创建库的本地系统的物理路径。 运行执行此命令后,检查 angular 应用程序的 package.json 文件。依赖项部分将显示该库是从您的本地计算机(特别是从您上面提到的路径)而不是 npm 存储库中提取的。
  • 运行 您的 angular 应用程序使用 ng servenpm start.

就这些了...

现在在您的库中进行任何代码更改并保存。 它会自动反映在您的目标应用程序中,因为我们 运行 库处于“监视”模式。