多个angular4模块的通用代码答案

【问题标题】：Common code for multiple angular4 modules多个angular4模块的通用代码
【发布时间】：2017-08-08 21:12:42
【问题描述】：

我们公司的情况是，在一个 Intellij 项目中有多个 angular4 模块。在所有这些模块中，都有当前正在复制的通用代码，例如：

Angular 组件（以及其他 Angular 工件，如指令和服务）。
资产 - 例如图像和字体。
依赖关系 - 例如其 node_modules 中的引导程序（和其他）。

我的问题是我们如何重新排列模块，以便我们有一个共同的地方（比如同一个项目中的一个共同的 intellij 模块，也许？），以便所有共同的代码都驻留在其中？

显然，编辑器仍然必须继续正确地建议完成（来自特定模块和公共模块），并且 webpack 应该继续正确构建。

【问题讨论】：

【解决方案1】：

您可以为公共部分创建一个单独的静态 Web 模块。但请注意，Idea 模块之间的类型解析仅适用于依赖模块：您的每个 Angular 模块都应该依赖于 common-module 以从 common-module 解析中获取函数。创建对静态 Web 模块的依赖的唯一方法是添加 JavaScript 库：在 Settings | Languages & Frameworks | JavaScript | Libraries、Add...、Add files 中，选择 common-module 目录包含您想要引用的函数，然后在Manage scopes 对话框中确保将此库附加到引用该函数的模块。

另一个选项是将此公用文件夹作为单独的内容根添加到您的每个 Web 模块：Project Structure | Modules，选择您的模块，Add content root，选择您的公用代码所在的文件夹。

webpack 应该会继续正确构建。

Webpack 对 IDEA 模块/项目结构一无所知，它处理路径。

【讨论】：

第二个将公共模块文件夹添加为内容根目录的选项不适用，因为 Intellij 禁止这样做。取自出现的错误对话框：“一个项目中的两个模块不能共享相同的内容根目录”。