I'm using the Angular Material google maps component for integrating Maps in to an Ionic/Capacitor application.
https://github.com/angular/components/tree/master/src/google-maps
The map functionality works perfectly fine when I'm developing the application. When I try to run the test file for the component that implements the Google Map, I get this error:
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 (this was kinda a last ditch effort, no luck tho.):
config.set({
...
plugins: [
...
require('@angular/google-maps')
],
...
});
HTML:
<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>
Typescript:
@ViewChild(GoogleMap) map: GoogleMap;
@ViewChild(MapRectangle) rectangle: MapRectangle;
And here's the entire spec file:
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();
});
});
question from:
https://stackoverflow.com/questions/65839038/angular-googlemaps-error-when-using-it-in-test 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…