परीक्षण में इसका उपयोग करते समय कोणीय GoogleMaps त्रुटि

मैं एक आयनिक/संधारित्र अनुप्रयोग में मानचित्रों को एकीकृत करने के लिए कोणीय सामग्री Google मानचित्र घटक का उपयोग कर रहा हूं।

https://github.com/angular/components/tree/master/src/google-maps

जब मैं एप्लिकेशन विकसित कर रहा हूं तो मानचित्र कार्यक्षमता पूरी तरह से ठीक काम करती है। जब मैं Google मानचित्र को लागू करने वाले घटक के लिए परीक्षण फ़ाइल चलाने का प्रयास करता हूं, तो मुझे यह त्रुटि मिलती है:

Failed: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
Error: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
    at new GoogleMap (http://localhost:9876/_karma_webpack_/node_modules/@angular/google-maps/__ivy_ngcc__/fesm2015/google-maps.js:202:1)
    at NodeInjectorFactory.GoogleMap_Factory [as factory] (http://localhost:9876/_karma_webpack_/node_modules/@angular/google-maps/__ivy_ngcc__/fesm2015/google-maps.js:441:49)
    at getNodeInjectable (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4029:1)
    at instantiateAllDirectives (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7964:1)
    at createDirectivesInstances (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7330:1)
    at ɵɵelementStart (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13902:1)
    at HomePage_Template (ng:///HomePage.js:79:9)
    at executeTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7303:1)
    at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7112:1)
    at renderComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:8373:1)

Karma.conf.js (यह एक आखिरी खाई का प्रयास था, कोई भाग्य नहीं।):

config.set({
  ...
  plugins: [
    ...
    require('@angular/google-maps')
  ],
  ...
});

एचटीएमएल:

<google-map>
    <map-rectangle
      *ngIf="showSelectionUI"
      [bounds]="bounds"
      [options]="options"
    ></map-rectangle>
    <map-marker
      #marker="mapMarker"
      *ngFor="let position of markerPositions"
      [position]="position"
     ></map-marker>
</google-map>

टाइपप्रति:

@ViewChild(GoogleMap) map: GoogleMap;

@ViewChild(MapRectangle) rectangle: MapRectangle;

और यहाँ पूरी कल्पना फ़ाइल है:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { Storage } from '@ionic/storage';

import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';
import { GoogleMapsModule, GoogleMap } from '@angular/google-maps';
import { GooglePlaceModule } from 'ngx-google-places-autocomplete';

describe('HomePage', () => {
  let component: HomePage;
  let fixture: ComponentFixture<HomePage>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [HomePage],
      imports: [
        IonicModule.forRoot(),
        HttpClientTestingModule,
        GoogleMapsModule,
        GooglePlaceModule
      ],
      providers: [
        {
          provide: Storage,
          useValue: {
            get: () => 'manual'
          }
        }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});