如何在模块 A 导入模块 B 的地方开发两个 angular 模块

How to develop two angular modules locally where module A imports module B

在 angularjs 中开发两个本地项目时(其中一个导入另一个)我会简单地 运行 "npm link" 在模块 B 的文件夹中,然后 运行 "npm link module-B" 在我的主模块的文件夹中,每当我更改模块 B 中的文件时,我都会直接在我的浏览器服务模块 A 中看到它。

但是 angular(4) 似乎并不那么容易。

我用ng-packagr生成了一个dist文件夹。
我 运行 npm link 在 dist 文件夹中。
我 运行 npm link module-B 在我的主模块文件夹中。
然后我 运行 ng serve --preserve-symlinks。

到目前为止一切顺利,可以理解模块B的组件。 但是,如果我尝试更改模块 B 中的某些内容,re运行 ng-packagr,我的主模块的 "ng serve" 无法编译,我必须停止并启动 ng serve.

我认为 ng-packagr 首先删除了 dist 文件夹,这会触发 ng serve 中的重建失败,并且没有注意到删除 dist 文件夹后出现的新创建的文件。

我们是否必须使用 ng-packagr 或是否有其他方式进行多项目本地开发。

更新:

如果我们在 ng-packagr.js 中注释掉此部分,它不会删除文件夹,并且浏览器会在文件更改且 ngpackagr 为 运行:

时更新

return Promise.all([ /*rimraf_1.rimraf(p.dest),*/ rimraf_1.rimraf(p.workingDirectory) ]);

但是 运行ning ng-packagr 需要一些时间,具体取决于库的大小。因为它构建了整个东西,而不仅仅是被更改的文件。

好的,我想我成功了。这个解决方案感觉更直接,并且不使用 ng-packagr。我所做的是:

  • 在模块 B 中,我将所有 @angular-依赖项从 dependencies 移到了 peerDependencies。
  • 已将 index.ts 添加到包含以下内容的模块 B 的根文件夹:
    导出 * 从“./src/.../panel.module”
  • 运行 "npm link" 来自模块 B 的根文件夹
  • 运行 "npm link module-B" 来自模块 A 的根文件夹
  • 运行 ng serve --preserve-symlinks

index.ts 文件使导入保持不变,无论您是从 npm 存储库获取模块还是在本地开发:
从 "module-b";

导入 {moduleB}

我认为此解决方案仅适用于仅在 "parent container" 中 运行 的组件,例如使用该组件的项目。如果 moduleB 有,比方说 demo-module/page,我认为必须分两步将其分解,首先将演示模块作为单独的 npm 项目,然后将组件模块作为 Child-npm 项目。