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