build: load Google Maps and YouTube APIs on demand in dev app (#25162)

Only loads the Google Maps and YouTube APIs when they are necessary in the dev app. This will make the app load quicker and reduce the amount of logs in the console.
angular · Jun 26, 2022 · 8347129 · 8347129
1 parent 323359c
commit 8347129
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 22 deletions.
diff --git a/src/dev-app/google-map/google-map-demo.html b/src/dev-app/google-map/google-map-demo.html
@@ -1,4 +1,5 @@
-<div class="demo-google-map">
+<div *ngIf="!hasLoaded">Loading Google Maps API...</div>
+<div class="demo-google-map" *ngIf="hasLoaded">
   <google-map height="400px"
               width="750px"
               [center]="center"

diff --git a/src/dev-app/google-map/google-map-demo.ts b/src/dev-app/google-map/google-map-demo.ts
@@ -44,6 +44,8 @@ const CIRCLE_CENTER: google.maps.LatLngLiteral = {
 };
 const CIRCLE_RADIUS = 500000;
 
+let apiLoadingPromise: Promise<unknown> | null = null;
+
 /** Demo Component for @angular/google-maps/map */
 @Component({
   selector: 'google-map-demo',
@@ -96,6 +98,7 @@ export class GoogleMapDemo {
   };
 
   isGroundOverlayDisplayed = false;
+  hasLoaded: boolean;
   groundOverlayImages = [
     {
       title: 'Red logo',
@@ -116,19 +119,16 @@ export class GoogleMapDemo {
   isBicyclingLayerDisplayed = false;
 
   mapTypeId: google.maps.MapTypeId;
-  mapTypeIds = [
-    google.maps.MapTypeId.HYBRID,
-    google.maps.MapTypeId.ROADMAP,
-    google.maps.MapTypeId.SATELLITE,
-    google.maps.MapTypeId.TERRAIN,
-  ];
+  mapTypeIds = ['hybrid', 'roadmap', 'sattelite', 'terrain'] as google.maps.MapTypeId[];
 
   markerClustererImagePath =
     'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';
 
   directionsResult?: google.maps.DirectionsResult;
 
-  constructor(private readonly _mapDirectionsService: MapDirectionsService) {}
+  constructor(private readonly _mapDirectionsService: MapDirectionsService) {
+    this._loadApi();
+  }
 
   authFailure() {
     console.log('Auth failure event emitted');
@@ -257,4 +257,41 @@ export class GoogleMapDemo {
 
     return result;
   }
+
+  private _loadApi() {
+    this.hasLoaded = !!window.google?.maps;
+
+    if (this.hasLoaded) {
+      return;
+    }
+
+    if (!apiLoadingPromise) {
+      // Key can be set through the `GOOGLE_MAPS_KEY` environment variable.
+      const apiKey: string | undefined = (window as any).GOOGLE_MAPS_KEY;
+
+      apiLoadingPromise = Promise.all([
+        this._loadScript(
+          `https://maps.googleapis.com/maps/api/js?libraries=visualization${
+            apiKey ? `&key=${apiKey}` : ''
+          }`,
+        ),
+        this._loadScript('https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js'),
+      ]);
+    }
+
+    apiLoadingPromise.then(
+      () => (this.hasLoaded = true),
+      error => console.error('Failed to load Google Maps API', error),
+    );
+  }
+
+  private _loadScript(url: string): Promise<unknown> {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = url;
+      script.addEventListener('load', resolve);
+      script.addEventListener('error', reject);
+      document.body.appendChild(script);
+    });
+  }
 }
diff --git a/src/dev-app/index.html b/src/dev-app/index.html
@@ -17,20 +17,7 @@
 </head>
 <body>
   <dev-app>Loading...</dev-app>
-
   <script src="zone.js/dist/zone.js"></script>
-  <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 can be set through the `GOOGLE_MAPS_KEY` environment variable.
-      const key = window.GOOGLE_MAPS_KEY;
-      const script = document.createElement('script');
-      script.src = 'https://maps.googleapis.com/maps/api/js?libraries=visualization' +
-        (key ? '&key=' + key : '');
-      document.body.appendChild(script);
-    })();
-  </script>
   <script src="bundles/dev-app/main.js" type="module"></script>
 </body>
 </html>
diff --git a/src/dev-app/youtube-player/youtube-player-demo.ts b/src/dev-app/youtube-player/youtube-player-demo.ts
@@ -53,7 +53,9 @@ export class YouTubePlayerDemo implements AfterViewInit, OnDestroy {
   videoWidth: number | undefined;
   videoHeight: number | undefined;
 
-  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {
+    this._loadApi();
+  }
 
   ngAfterViewInit(): void {
     this.onResize();
@@ -70,4 +72,14 @@ export class YouTubePlayerDemo implements AfterViewInit, OnDestroy {
   ngOnDestroy(): void {
     window.removeEventListener('resize', this.onResize);
   }
+
+  private _loadApi() {
+    if (!window.YT) {
+      // We don't need to wait for the API to load since the
+      // component is set up to wait for it automatically.
+      const script = document.createElement('script');
+      script.src = 'https://www.youtube.com/iframe_api';
+      document.body.appendChild(script);
+    }
+  }
 }