我如何在我的Angular main.bundle.js中包含一个javascript配置文件

时间:2018-02-06 17:04:13

标签: angular typescript config

我已经看过几篇关于此的帖子,但没有一篇完全符合我的要求所以我不得不再次提问。

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

一篇帖子建议您将文件放入assets文件夹,然后使用HttpClient获取它。我试过这个,它实际上确实有效,但我遇到的问题是因为这是一个配置文件,它在处理任何脚本的最开始时是非常需要的。需要这样做的原因是因为其中一个全局变量是我将要消费的api的url。

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

在检查控制台中下载的文件时,我看到一个名为main.bundle.js的文件。我不确定所有已编译的打字稿文件的最终位置,但我猜它在这里。我想要的是我的config.js以某种方式附加到这个并在页面加载时加载。这是否有意义,或者有更好/推荐的方法吗?

(注意,Angular 5)

3 个答案:

答案 0 :(得分:1)

您应该使用环境目录。

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

要部署,请使用ng build --env=<envName>

要使用环境,只需导入它即可。

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

您可以阅读更多here

答案 1 :(得分:1)

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

{
keys1:"%%mykey1%%",
keys2:"%%mykey2%%"
}
  1. 您通常使用Angular-CLI构建应用程序 然后你会在你的dist / main.js中找到你的%%mykey1%%
  2. 制作一个小脚本,用您想要的密钥替换%%mykey1%%
  3. 这样,您的git仓库中就不需要有100个环境文件。

答案 2 :(得分:0)

虽然有点晚。 最初的问题几乎正确。 是的,您将配置放入一个json文件中,是的,您使用httpClient加载了它。 您正在努力在正确的时间加载它。 好吧,APP_INITIALIZER进行了救援。

您可以使用此令牌提供服务工厂,该工厂将在angular实际开始渲染组件之前加载您的配置。

这是关于它的博客文章:https://aclottan.wordpress.com/2016/12/30/load-configuration-from-external-file/