5

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

但是使用 angular(4) 似乎并不容易。

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

到目前为止一切顺利,它可以理解模块 B 的组件。但是如果我尝试更改模块 B 中的某些内容,重新运行 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) ]);

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

4

1 回答 1

5

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

  • 在模块 BI 中,我将所有 @angular-dependencies 从依赖项移至 peerDependencies。
  • 将 index.ts 添加到模块 B 的根文件夹,其中包含:
    export * from "./src/.../panel.module"
  • 从模块 B 的根文件夹运行“npm link”
  • 从模块 A 的根文件夹运行“npm link module-B”
  • 运行 ng serve --preserve-symlinks

index.ts 文件这样做是为了使无论您从 npm 存储库获取模块还是在本地开发模块,导入都保持不变:
import {moduleB} from "module-b";

我认为此解决方案仅适用于仅在“父容器”中运行的组件,例如使用组件的项目。如果 moduleB 有,比如说一个演示模块/页面,我认为必须分两个步骤将其分解,首先将演示模块作为单独的 npm-project 和 Child-npm-Project 中的组件模块。

于 2017-10-23T05:36:35.940 回答