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

zz2j4svz  于 2023-10-19  发布在  Angular
关注(0)|答案(2)|浏览(144)

如果我像这样创建一个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...

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

0sgqnhkj

0sgqnhkj1#

编辑07.02.2021:一个更简单的方法

你可以将你的angular库直接链接到你选择的应用程序,例如。你的主应用为此,请执行以下步骤:
1.在终端中导航到angular库项目的输出目录,并运行命令npm link。您可能必须触发ng build一次,以便输出目录存在。这将使您的库在您的计算机上本地可用。
1.现在导航到您的主应用程序,您的angular库在其中用作依赖项,并运行命令npm link [name_of_your_module]
1.将"preserveSymlinks": true添加到 projects > architect > build 下的angular.json文件中
1.用ng serve运行你的主应用程序,在你的库中做一些修改,构建它。根据您的IDE,您可以创建一个触发自动构建的监视任务。你应该能够看到自己的变化。
1.最后,如果您完成了对更改的测试,您可以通过在主应用程序的根目录中运行npm unlink [name_of_your_module]命令来取消依赖项与主应用程序的链接。转到您的angular库项目目录并运行npm unlink,以便您的库不再在本地可用。你现在可以发布你的修改,并在你的主应用程序中使用npm install安装你的最新版本。
请记住,它必须是dist输出文件夹,因为angular tool不支持直接链接您的库。你也可以用同样的方式将库链接到其他angular库,但是你必须将"preserveSymlinks": true添加到你的库的 * tsconfig.json * 中。

旧答案:

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

dgsult0t

dgsult0t2#

@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文件。dependencies部分将显示库是从本地机器(特别是从上面提到的路径)而不是npm存储库中提取的。
  • 使用ng servenpm start运行angular应用程序。

就这样...
现在在库中进行任何代码更改并保存它。当我们在“监视”模式下运行库时,它将自动反映在目标应用程序中。
更新:根据一些用户的建议,您可能希望在angular.json文件中将preserveSymlinks设置为true

相关问题