Question

我有一个angular2应用程序，并使用ng2-map模块集成了Google地图。

首先，我尝试在@NgModule部分的相应模块中指定google map键，如下所示：

Ng2MapModule.forRoot({
      apiUrl: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,visualization,places&key=GOOGLE_MAP_KEY',
    })

但是在模块文件中也无法访问环境变量，即使包含了环境变量，也会出现控制台错误，例如，未定义google。然后，我将Google Map CDN包含在index.html文件本身中。

当前，我已将Google Map URL和google map key一起包含在 index.html 中。但是问题是，在不同的环境（例如开发，测试和生产等）中，密钥是不同的。

  <script src="https://maps.googleapis.com/maps/api/js?v=3.33&libraries=drawing,visualization,places&key=GOOGLE_MAP_KEY"></script>

由于环境变量不在index.html范围内，因此我在构建（ng build）项目时必须手动照顾这些google map键。

有没有办法让我可以在构建命令中提供环境变量，该变量应采用相应的google map键，还是有最佳实践？

谢谢

Answer 1

打开您的angular.json文件。

遵循路径：

$.projects.[project name].architect.build.configurations

您将找到类型的对象

        "local": {
          "fileReplacements": [{
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.local.ts"
          }]
        },

只需复制此格式即可创建一个新环境。然后，您可以提供特定的env文件，也可以在其中提供构建参数。

现在您可以使用以下命令运行命令

ng build --configuration=local

在angular2 +应用程序中指定Google Map Key的最佳做法

1 个答案: