【问题标题】:Install Angular library from local folder or network folder从本地文件夹或网络文件夹安装 Angular 库
【发布时间】:2021-09-17 11:29:01
【问题描述】:

如果我创建一个这样的角度库:

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...

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

谢谢

【问题讨论】:

    标签: angular npm angular-library


    【解决方案1】:

    编辑 07.02.2021:更简单的方法

    您可以将 Angular 库直接链接到您选择的应用程序,例如你的主要应用程序。为此,请按以下步骤操作:

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

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

    旧答案:

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

    【讨论】:

    • 好的,我试试,但我得到一个错误。我正在使用以下命令: npm install C:\...\dist\test-library\test-library-0.0.1.tgz
    • npm 错误!代码 ENOENT npm 错误!系统调用统计 npm 错误!路径 C:\...\dist\test-library\test-library-0.0.1.tgz npm ERR! errno -4058 npm 错误! enoent ENOENT:没有这样的文件或目录,stat 'C:\...\dist\test-library\test-library-0.0.1.tgz' npm ERR! enoent 这与 npm 找不到文件有关。 npm 错误! enoent 但是那个目录和文件确实存在
    • 你的路径有空格吗?尝试 npm install "C:\...\dist\test-library\test-library0.0.1.tgz" 或者将包移动到其他地方并从那里安装。您甚至可以将它移动到与测试项目相同的目录中。
    • 谢谢,我想我正在工作。我应该以不同的方式这样做吗?好像有点啰嗦,建库,复制,然后使用npm install。我只是希望使用诸如 ng-build --watch 之类的东西,或者仅当应用程序位于工作区中时才有效?感谢您的帮助。
    • 如果你阅读了npm install <tarball file> 的文档,他们提到了npm link.___注意:如果你只是想将一个dev目录链接到你的npm根目录,你可以使用npm链接更容易地做到这一点___不知道这是否有帮助,我自己没有尝试过。
    【解决方案2】:

    @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 存储库中提取的。
    • 使用 ng servenpm start 运行您的 Angular 应用程序。

    就是这样……

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

    【讨论】:

    • 第一点不应该是“ng build --watch”吗?
    • ng build --watchnpm build --watch 都是正确的。通常build 脚本中会有ng build。但我同意,ng build --watch 更直观。我会更新答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-09-30
    • 2015-10-14
    • 1970-01-01
    • 2017-08-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多