build: resolve type bundling issues (#24865)

Updating `@angular/bazel` to `14.0.0-next.15` reveals some issues with type bundling. These changes aim to resolve the issues by moving some code around.

Author: crisbeto

package.json

@@ -71,7 +71,7 @@
     "@angular-devkit/build-angular": "14.0.0-next.12",
     "@angular-devkit/core": "14.0.0-next.12",
     "@angular-devkit/schematics": "14.0.0-next.12",
-    "@angular/bazel": "14.0.0-next.14",
+    "@angular/bazel": "14.0.0-next.15",
     "@angular/cli": "14.0.0-next.12",
     "@angular/compiler-cli": "14.0.0-next.15",
     "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#335aad1b04b3d95cd4cb1d719e73b93d4e90cce3",

src/components-examples/material/chips/chips-harness/chips-harness-example.ts

@@ -9,6 +9,6 @@ import {Component} from '@angular/core';
 })
 export class ChipsHarnessExample {
   isDisabled = false;
-  remove = jasmine.createSpy('remove spy');
-  add = jasmine.createSpy('add spy');
+  remove: () => void = jasmine.createSpy('remove spy');
+  add: () => void = jasmine.createSpy('add spy');
 }

src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts

@@ -12,6 +12,13 @@ import {
   createMarkerSpy,
 } from '../testing/fake-google-map-utils';
 import {MapMarkerClusterer} from './map-marker-clusterer';
+import {
+  AriaLabelFn,
+  Calculator,
+  ClusterIconStyle,
+  MarkerClusterer,
+  MarkerClustererOptions,
+} from './marker-clusterer-types';
 
 describe('MapMarkerClusterer', () => {
   let mapSpy: jasmine.SpyObj<google.maps.Map>;

src/google-maps/map-marker-clusterer/map-marker-clusterer.ts

@@ -8,7 +8,6 @@
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
 /// <reference types="google.maps" />
-/// <reference path="marker-clusterer-types.ts" />
 
 import {
   AfterContentInit,
@@ -31,6 +30,14 @@ import {takeUntil} from 'rxjs/operators';
 import {GoogleMap} from '../google-map/google-map';
 import {MapEventManager} from '../map-event-manager';
 import {MapMarker} from '../map-marker/map-marker';
+import {
+  AriaLabelFn,
+  Calculator,
+  Cluster,
+  ClusterIconStyle,
+  MarkerClusterer,
+  MarkerClustererOptions,
+} from './marker-clusterer-types';
 
 /** Default options for a clusterer. */
 const DEFAULT_CLUSTERER_OPTIONS: MarkerClustererOptions = {};
@@ -199,7 +206,7 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
   ngOnInit() {
     if (this._canInitialize) {
       const clustererWindow = window as unknown as typeof globalThis & {
-        MarkerClusterer?: MarkerClusterer;
+        MarkerClusterer?: typeof MarkerClusterer;
       };
 
       if (!clustererWindow.MarkerClusterer && (typeof ngDevMode === 'undefined' || ngDevMode)) {
@@ -214,7 +221,7 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
       // We'll bring it back in inside the `MapEventManager` only for the events that the
       // user has subscribed to.
       this._ngZone.runOutsideAngular(() => {
-        this.markerClusterer = new MarkerClusterer(
+        this.markerClusterer = new clustererWindow.MarkerClusterer!(
           this._googleMap.googleMap!,
           [],
           this._combineOptions(),

src/google-maps/map-marker-clusterer/marker-clusterer-types.ts

@@ -14,7 +14,7 @@
  * See
  * googlemaps.github.io/v3-utility-library/classes/_google_markerclustererplus.markerclusterer.html
  */
-declare class MarkerClusterer {
+export declare class MarkerClusterer {
   constructor(
     map: google.maps.Map,
     markers?: google.maps.Marker[],
@@ -93,7 +93,7 @@ declare class MarkerClusterer {
  *
  * See googlemaps.github.io/v3-utility-library/classes/_google_markerclustererplus.cluster.html
  */
-declare class Cluster {
+export declare class Cluster {
   constructor(markerClusterer: MarkerClusterer);
   getCenter(): google.maps.LatLng;
   getMarkers(): google.maps.Marker[];
@@ -108,7 +108,7 @@ declare class Cluster {
  * googlemaps.github.io/v3-utility-library/classes/
  * _google_markerclustererplus.markerclustereroptions.html
  */
-declare interface MarkerClustererOptions {
+export declare interface MarkerClustererOptions {
   ariaLabelFn?: AriaLabelFn;
   averageCenter?: boolean;
   batchSize?: number;
@@ -136,7 +136,7 @@ declare interface MarkerClustererOptions {
  * googlemaps.github.io/v3-utility-library/interfaces/
  * _google_markerclustererplus.clustericonstyle.html
  */
-declare interface ClusterIconStyle {
+export declare interface ClusterIconStyle {
   anchorIcon?: [number, number];
   anchorText?: [number, number];
   backgroundPosition?: string;
@@ -160,7 +160,7 @@ declare interface ClusterIconStyle {
  * googlemaps.github.io/v3-utility-library/interfaces/
  * _google_markerclustererplus.clustericoninfo.html
  */
-declare interface ClusterIconInfo {
+export declare interface ClusterIconInfo {
   index: number;
   text: string;
   title: string;
@@ -171,14 +171,14 @@ declare interface ClusterIconInfo {
  *
  * See googlemaps.github.io/v3-utility-library/modules/_google_markerclustererplus.html#arialabelfn
  */
-declare type AriaLabelFn = (text: string) => string;
+export declare type AriaLabelFn = (text: string) => string;
 
 /**
  * Function type alias for calculating how a marker cluster is displayed.
  *
  * See googlemaps.github.io/v3-utility-library/modules/_google_markerclustererplus.html#calculator
  */
-declare type Calculator = (
+export declare type Calculator = (
   markers: google.maps.Marker[],
   clusterIconStylesCount: number,
 ) => ClusterIconInfo;

src/google-maps/public-api.ts

@@ -29,3 +29,9 @@ export {MapTrafficLayer} from './map-traffic-layer/map-traffic-layer';
 export {MapTransitLayer} from './map-transit-layer/map-transit-layer';
 export {MapHeatmapLayer, HeatmapData} from './map-heatmap-layer/map-heatmap-layer';
 export {MapGeocoder, MapGeocoderResponse} from './map-geocoder/map-geocoder';
+export {
+  MarkerClustererOptions,
+  ClusterIconStyle,
+  AriaLabelFn,
+  Calculator,
+} from './map-marker-clusterer/marker-clusterer-types';

src/google-maps/testing/fake-google-map-utils.ts

@@ -6,6 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {MarkerClusterer} from '../map-marker-clusterer/marker-clusterer-types';
+
 // The global `window` variable is typed as an intersection of `Window` and `globalThis`.
 // We re-declare `window` here and omit `globalThis` as it is typed with the actual Google
 // Maps types which we intend to override with jasmine spies for testing. Keeping `globalThis`

tools/public_api_guard/google-maps/google-maps.md

@@ -18,6 +18,44 @@ import { OnInit } from '@angular/core';
 import { QueryList } from '@angular/core';
 import { SimpleChanges } from '@angular/core';
 
+// @public
+export type AriaLabelFn = (text: string) => string;
+
+// @public
+export type Calculator = (markers: google.maps.Marker[], clusterIconStylesCount: number) => ClusterIconInfo;
+
+// @public
+export interface ClusterIconStyle {
+    // (undocumented)
+    anchorIcon?: [number, number];
+    // (undocumented)
+    anchorText?: [number, number];
+    // (undocumented)
+    backgroundPosition?: string;
+    // (undocumented)
+    className?: string;
+    // (undocumented)
+    fontFamily?: string;
+    // (undocumented)
+    fontStyle?: string;
+    // (undocumented)
+    fontWeight?: string;
+    // (undocumented)
+    height: number;
+    // (undocumented)
+    textColor?: string;
+    // (undocumented)
+    textDecoration?: string;
+    // (undocumented)
+    textLineHeight?: number;
+    // (undocumented)
+    textSize?: number;
+    // (undocumented)
+    url?: string;
+    // (undocumented)
+    width: number;
+}
+
 // @public
 const DEFAULT_HEIGHT = "500px";
 
@@ -657,6 +695,46 @@ export class MapTransitLayer extends MapBaseLayer {
     static ɵfac: i0.ɵɵFactoryDeclaration<MapTransitLayer, never>;
 }
 
+// @public
+export interface MarkerClustererOptions {
+    // (undocumented)
+    ariaLabelFn?: AriaLabelFn;
+    // (undocumented)
+    averageCenter?: boolean;
+    // (undocumented)
+    batchSize?: number;
+    // (undocumented)
+    batchSizeIE?: number;
+    // (undocumented)
+    calculator?: Calculator;
+    // (undocumented)
+    clusterClass?: string;
+    // (undocumented)
+    enableRetinaIcons?: boolean;
+    // (undocumented)
+    gridSize?: number;
+    // (undocumented)
+    ignoreHidden?: boolean;
+    // (undocumented)
+    imageExtension?: string;
+    // (undocumented)
+    imagePath?: string;
+    // (undocumented)
+    imageSizes?: number[];
+    // (undocumented)
+    maxZoom?: number;
+    // (undocumented)
+    minimumClusterSize?: number;
+    // (undocumented)
+    styles?: ClusterIconStyle[];
+    // (undocumented)
+    title?: string;
+    // (undocumented)
+    zIndex?: number;
+    // (undocumented)
+    zoomOnClick?: boolean;
+}
+
 // (No @packageDocumentation comment for this package)
 
 ```

yarn.lock

@@ -124,10 +124,10 @@
   dependencies:
     tslib "^2.3.0"
 
-"@angular/[email protected].14":
-  version "14.0.0-next.14"
-  resolved "https://registry.yarnpkg.com/@angular/bazel/-/bazel-14.0.0-next.14.tgz#9ce0649af3c9aa05fd5896b99aa325e3ec078da2"
-  integrity sha512-eSNX7aRUBNplRxJaZh5WlZp81vlbgx9oO4qSbrv3D7wmftq1sdimycjrpg7gC8vh/zkDid29gZ5m5UI6m0n4AA==
+"@angular/[email protected].15":
+  version "14.0.0-next.15"
+  resolved "https://registry.yarnpkg.com/@angular/bazel/-/bazel-14.0.0-next.15.tgz#bfaf42c8009e9767879fb8e4775327e449718302"
+  integrity sha512-IMkqtdYnjspEgkNk5PnoQY5Y5fiQLjuT4C2F3bPWdIVdGRGMXR13AegIF4PtOEFjEFPPOflnY2ocAzaD1wVHKg==
   dependencies:
     "@microsoft/api-extractor" "7.22.2"
     shelljs "^0.8.5"