在服务应用程序时观看外部本地库答案

【问题标题】：Watching external local library while serving app在服务应用程序时观看外部本地库
【发布时间】：2020-02-21 19:01:33
【问题描述】：

我有一个主应用程序和一些独立的库（不是主应用程序的一部分）。现在，当我在一个库上工作时，我将 .tgz 包含在主应用程序的 package.json 中。问题是我必须先构建/打包库，然后提供主应用程序以查看更改。

有没有办法在查看库中的变化时提供主应用程序？我知道我可以构建 --watch 库，但我仍然需要打包以获取 .tgz

有什么想法吗？谢谢

【问题讨论】：

标签： angular

【解决方案1】：

npm 提供了一个link 命令，可用于将本地库应用链接到主应用。

只需按照以下步骤链接您的本地图书馆。

打开您的库应用程序并导航到dist/<your_lib> 文件夹。确保您的构建在监视模式下运行，以便您的主应用可以即时获取更改。
运行命令npm link。
打开您的主应用程序并在根目录npm link <lib_app_name> 上运行以下命令。
打开主应用程序的 angular.json。在architect -> build -> options 下，添加此属性"preserveSymlinks": true。
现在在主应用的 app.module.ts 中添加 lib 应用模块，并开始使用 lib 应用组件/服务。
使用ng serve 像往常一样构建和提供您的应用程序。您的应用现在应该使用 lib 应用组件/服务，没有任何错误。

如果您想知道它是如何工作的，npm link 会创建一个指向您的 lib 应用程序的符号链接，让您的主应用程序认为 npm 已在 node_modules 中安装了您的 lib 应用程序。有关这方面的更多信息，请参阅official docs

【讨论】：

谢谢很多，我试过了，我想这是个好方法，但不幸的是我的库在一个范围内，我无法让它工作。当我在 lib 中执行“npm link”时，我看到它在 AppData/roaming/npm/node_modules 中创建了一个名为“mylib”的链接，然后我进入主应用程序，我执行“npm link @scope/mylib”和我可以看到在 AppData/roaming/npm/node_modules 它创建了一个文件夹 @scope 并在该文件夹内创建了另一个文件夹“mylib”。
实际上，当我在 mainApp/node_modules/@scope/myLib 中的符号链接中导航时，我看到了 MyLib dist/ 文件夹的内容。应该没问题吧？当我尝试为主应用程序提供服务时，出现类似“找不到模块：错误：无法解析“..\AppData\Roaming\npm\node_modules\@scope\myLib\fesm5 中的'@angular/common'”之类的错误/跨度>
@Lempkin 这似乎是来自 lib 应用程序的编译错误，尤其是在 ng-package.json 中指定的对等依赖项。您可以在 Stackblitz 中分享您的 lib 应用程序的最小版本吗？

【解决方案2】：

您可以在tsconfig.json 中添加指向库中主导出文件的路径；

"compilerOptions": {
    "paths": {
        "my-library": ["path/to/the/librarys/index.ts"]
    }
}

【讨论】：