Question

我正在构建一个必须像SaaS一样工作的应用程序，每个客户端都可以有一个单独的实例或一组应用程序实例。后端建立在Go lang之上，前端是Angular 6 atm。为了使服务可配置，我必须定义一个全局公认的配置，该配置将注入index.html中。我熟悉环境概念，但是它不符合我的要求，因为我必须让客户能够更改参数。例如Google Analytics（分析）ID。

在当前的Angular设计中，可以为每个客户端重新编译应用程序，或使用服务从服务器检索参数，这会由于一次额外的往返而缩短启动时间。

为克服这个问题，我打算注入类似的东西

<script>
window.myAppGlobalConfig = { param1: 'value1' };
</script>

它确实可以与AgularJS完美配合（我以前曾经做过），但是对于Angular 6来说似乎有些混乱和不清楚。

从技术上讲，我可以定义一个接口并使用它，但是我希望能够将这些东西与ng serve一起使用，但是我不知道如何配置它。

我的问题是：如何将自定义js配置内联注入index.html文件？

Answer 1

步骤-1：创建一个js文件

只需在资产目录中添加一个js文件

假设名称为 config.js ，然后将所有配置放入其中例如：

var myAppGlobalConfig = { param1: 'value1' };
var BASE_URL = "http://xxx.backend.xxx/api/";
var GET_DATA = BASE_URL + "data.go";

步骤-2：包含在index.html中

现在在index.html中，只需在其他脚本之前添加该脚本即可

<script src="assets/config.js"></script>

步骤-3：在您的 typescript 类中使用它们

例如，您可以分配http端点地址。

this.http.get(window["DATA_URL"]).subscribe(...)

Answer 2

您可以将任何外部js文件放在src/assets/external.js

上

确保assets中包含.angular-cli.json

在您的index.html中，添加<script src="assets/external.js"></script>

在构建时，您应该可以在build/assets中看到它

要使用它，您可以declare var myGlobalVar: any

如何在Angular的ng服务中的index.html中插入全局配置？

2 个答案: