angular - Angular 7:构建应用程序,外部配置被排除在包之外
问题描述
这可能是一个熟悉的话题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/
有没有人做过我想要实现的事情?谢谢!
解决方案
推荐阅读
- c# - 故事板不会在 Xamarin(Visual Studio)中打开
- excel - 多页控件上的Webbrowser控件在页面之间切换时消失
- javascript - 将 html 数据属性传递到另一个页面
- javascript - 在js中调用'new'时引用'this'时出现问题
- java - Apache POI:连接字符串单元格中的德语单元格格式
- corda - 当 Corda 节点执行任何事务时,节点资源管理器会引发序列化异常
- javascript - 如何通过过滤和修改其他对象来动态创建对象而不改变层次结构?
- pandas - 使用 MultiIndex 列在不同级别求和或分组?
- android - 用 EditText 视图替换字符串以填空测验
- asp.net - 如何从sql server通过id过程调用retrivedata