3

这可能是一个熟悉的话题App.settings - Angular 方式？但是，经过一天的研究，我找不到令人满意的解决方案，因此我在这里问这个问题。

目标是构建一个应用程序，并通过可配置的配置文件部署多次。这对于 QA 和应用程序支持团队来说很方便。

问题是， ng build 正在将配置文件内化到最终包中。

我的问题实际上很简单，是否可以在不使用环境模块或自定义配置服务或从 ng cli 中弹出（A7 中不允许）的情况下使用angular cli实现我的目标？

我想在\src\assets\config\文件夹中有应用程序config.js文件，它充当一个简单的模块。

配置.js

const appConfig = {
    apiUrl: 'some-api-url'
}
if (typeof module !== 'undefined' && module.exports) {
    module.exports = appConfig;
}

我在需要访问 apiUrl 属性的角度组件中使用这个模块，比如说

app.component.ts

import appConfig from '../assets/config/config'

@Component({
   ...
})

export class AppComponent {
   ...
   constructor() {
      console.log(appConfig.apiUrl);
   }
}

运行构建（用于产品）将始终导致 config.js 文件内容包含在包中，这是我想避免的。

我想避免

  • 使用环境文件。这是反模式
  • 使用获取配置文件的服务。这是一个相对不错的解决方案，但现在让我们认为这是一个不可行的选择
  • ng 弹出（A7 中不允许）

我试过的

  • 导入json而不是模块。仍然包含在捆绑包中。
  • 将配置模块文件夹添加到tsconfig.app.json的排除部分。不管我放什么，它仍然会被内化。

我知道这可以做到（使用弹出或自定义 cli 构建）

因为我看过一个 REACT 项目，所以它已经从 create-react-app cli 弹出到 webpack 中。构建的作用是：

  • 使用 CopyWebPackPlugin 将配置文件原样复制到dest构建中
  • 使用 HtmlWebpackIncludeAssetsPlugin 将配置模块文件 (*.config.js) 包含在 index.html 中，就像<script src=...>每个配置文件一样。
  • 设置外部数组https://webpack.js.org/configuration/externals/

有没有人做过我想要实现的事情？谢谢！

4

0 回答 0