我如何将 javascript 配置文件包含到我的 Angular main.bundle.js

Question

我已经看到几个 post，但其中 none 完全符合我的要求，所以我不得不再问一次。

我希望有一个名为 "config.js" 的文件，它位于我的项目的根目录中，我将在我的 git 存储库中将其设置为忽略。在这个文件中，我想要做的就是添加一些全局配置变量，这些变量可以在项目的其他任何地方访问。

一位post建议您将文件放入assets文件夹，然后使用HttpClient获取。我试过了，它确实有效，但我遇到的问题是因为这是一个配置文件，在处理任何脚本的一开始就迫切需要它。之所以需要这样做，是因为其中一个全局变量是我将要使用的 api 的 url。

这样做意味着我必须等待 dom 加载，然后等待 ajax 操作完成，然后才能在应用程序中执行任何其他操作。这是不可接受的。

在检查控制台中下载的文件时，我看到一个名为 main.bundle.js 的文件。我不确定所有已编译的打字稿文件最终在哪里，但我猜它就在这里。我想要的是我的 config.js 以某种方式附加到此并在页面加载时加载。这是否有意义，或者是否有 better/recommended 方法来做到这一点？

（注意，Angular 5）

Answer 1

你应该为此使用环境目录。

您为每个环境添加 environment.<envName>.ts 个文件。默认的 environment.ts 文件应该是本地文件。当涉及到源代码控制提交时忽略它。

为了部署，使用ng build --env=<envName>

为了使用环境，您只需导入它。

import { environment } from '../../environments/environment';

您可以阅读更多内容here。

Answer 2

另一个解决方案是在构建后替换密钥。您所有的键都应该是字符串。 1. 在你的 environment.ts 中，放入所有键：

{
keys1:"%%mykey1%%",
keys2:"%%mykey2%%"
}

%%mykey1%%

这样，您的 git 存储库中就不需要 100 个环境文件了。

Answer 3

虽然有点晚.. 最初的问题几乎是正确的。是的，您将配置放在 json 文件中，是的，您使用 httpClient 加载它。你正在努力如何在正确的时间加载它.. 好吧，APP_INITIALIZER 来拯救了。

您可以使用此令牌提供一个服务工厂，它将在 angular 实际开始呈现您的组件之前加载您的配置。

How can i include a javascript config file to my Angular main.bundle.js