From 4a3f2cfcf2c164a4db0e306f67be1fd932ead173 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sat, 30 Oct 2021 11:43:07 +0200
Subject: [PATCH] build: fix error when dev app is deployed

The `index.html` of the dev app assumes that the `DEV_APP_VARIABLES` global variable will always be present, but that's not the case when it is deployed. This causes an error which prevents the Google Maps script from loading.

These changes add a null check, as well as some docs about the `variables.json`.
---
 DEV_ENVIRONMENT.md     | 12 ++++++++----
 src/dev-app/index.html |  5 +++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/DEV_ENVIRONMENT.md b/DEV_ENVIRONMENT.md
index e24b2e2ac045..2b5024063fe2 100644
--- a/DEV_ENVIRONMENT.md
+++ b/DEV_ENVIRONMENT.md
@@ -1,5 +1,4 @@
 # Developer guide: getting your environment set up
-
 1. Make sure you have both `node` and `yarn` installed.
    We recommend using `nvm` to manage your node versions.
 2. angular/components uses Bazel which requires certain Bash and UNIX tools.
@@ -19,7 +18,6 @@ To bring up a local server, run `yarn dev-app`. This will automatically watch fo
 and rebuild. The browser should refresh automatically when changes are made.
 
 ### Running tests
-
 To run unit tests, run `yarn test <target>`. The `target` can be either a short name (e.g. `yarn test button`) or an explicit path `yarn test src/cdk/stepper`.
 To run the e2e tests, run `yarn e2e`.
 To run lint, run `yarn lint`.
@@ -67,7 +65,6 @@ at the file under `tools/public_api_guard/<target>.d.ts`.
 
 
 ### Disabling Git hooks
-
 If your development workflow does not intend the commit message validation to run automatically
 when commits are being created, or if you do not want to run the formatter upon `git commit`, you
 can disable any installed Git hooks by setting `HUSKY=0` in your shell environment. e.g.
@@ -78,4 +75,11 @@ export HUSKY=0
 
 # .bashrc
 export HUSKY=0
-```
\ No newline at end of file
+```
+
+### Injecting variables into the dev app
+Variables can be injected into the dev app by creating the `src/dev-app/variables.json` file.
+They'll be made available under the `window.DEV_APP_VARIABLES` object. The file isn't checked into
+Git and it can be used to pass private configuration like API keys. Variables currently being used:
+
+* `GOOGLE_MAPS_KEY` - Optional key for the Google Maps API.
diff --git a/src/dev-app/index.html b/src/dev-app/index.html
index 7c4b4f43a484..28a6a610043a 100644
--- a/src/dev-app/index.html
+++ b/src/dev-app/index.html
@@ -23,12 +23,13 @@
   <script src="https://www.youtube.com/iframe_api"></script>
   <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
   <script>
-    (function loadGoogleMaps(key) {
+    (function loadGoogleMaps(variables) {
+      var key = variables ? variables.GOOGLE_MAPS_KEY : null;
       var script = document.createElement('script');
       script.src = 'https://maps.googleapis.com/maps/api/js?libraries=visualization' +
         (key ? '&key=' + key : '');
       document.body.appendChild(script);
-    })(window.DEV_APP_VARIABLES.GOOGLE_MAPS_KEY);
+    })(window.DEV_APP_VARIABLES);
   </script>
   <script src="bundles/dev-app/main.js" type="module"></script>
 </body>