Creating new instance of the map

[Cravick]

Currently running into a very simple problem of trying to setup a new instance of the map component following the simple guides. Seems that the Map initialization is failing I think due to the nativescript file being bundled but no luck in resolving that issue. Attempted using babel as workaround at bottom to also no result.

Failing on this line in map-view-common.js function MapViewBase () var _this = _super !== null && _super.apply(this, arguments) || this;

Error JS: ERROR Error: Uncaught (in promise): TypeError: Class constructor View cannot be invoked without 'new' JS: TypeError: Class constructor View cannot be invoked without 'new' JS: at MapViewBase [as constructor] (file:///data/user/0/org.nativescript.GeoNotes/files/app/vendor.js:152818:47) JS: at new MapView (file:///data/user/0/org.nativescript.GeoNotes/files/app/vendor.js:153171:47) JS: at ViewUtil.createView (file:///data/user/0/org.nativescript.GeoNotes/files/app/vendor.js:93058:22) JS: at EmulatedRenderer.createElement (file:///data/user/0/org.nativescript.GeoNotes/files/app/vendor.js:93260:30) JS: at EmulatedRenderer.createElement (file:///data/user/0/org.nativescript.GeoNotes/files/app/vendor.js:93477:28) JS: at elementCreate (file:///data/user/0/org.nativescript.GeoNotes/files/app/vendor.js:50004:25) JS: at Module.ɵɵelementStart (file:///data/user/0/org.nativescript.GeoNotes/files/app/vendor.js:56898:43) JS: at NoteLocationComponent_Template (file:///data/user/0/org.nativescript.GeoNotes/files/app/bundle.8bd...

Map.html <GridLayout> <MapView #mapView (mapReady)="onMapReady($event)"></MapView> </GridLayout>

Map.ts import { Component, OnInit, ElementRef, ViewChild } from '@angular/core'; import { EventData } from '@nativescript/core'; import { registerElement } from '@nativescript/angular'; import { MapView, Marker, Position } from 'nativescript-google-maps-sdk';

registerElement("MapView", () => MapView);

@Component({ selector: 'app-note-location', templateUrl: './note-location.component.html', styleUrls: ['./note-location.component.scss'] }) export class NoteLocationComponent { private mapView: MapView;

constructor() {

}

onMapReady(event) { console.log('Map Ready'); } }

tsconfig.json { "compilerOptions": { "module": "ESNext", "target": "es2015", "moduleResolution": "node", "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipLibCheck": true, "noEmitHelpers": true, "noEmitOnError": true, "baseUrl": "./", "lib": [ "es2017", "dom", "es6" ] }, "exclude": [ "node_modules", "platforms" ] }

package.json "dependencies": { "@angular/animations": "~10.0.0", "@angular/common": "~10.0.0", "@angular/compiler": "~10.0.0", "@angular/core": "~10.0.0", "@angular/forms": "~10.0.0", "@angular/platform-browser": "~10.0.0", "@angular/platform-browser-dynamic": "~10.0.0", "@angular/router": "~10.0.0", "@nativescript/angular": "^10.0.2", "@nativescript/core": "^7.0.0-rc.52", "@nativescript/theme": "~2.2.1", "nativescript-geolocation": "^5.1.0", "nativescript-google-maps-sdk": "^2.9.1", "reflect-metadata": "~0.1.12", "rxjs": "~6.5.5", "tslib": "1.10.0", "webpack": "^4.44.1", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/core": "~10.0.0", "@angular/cli": "~10.0.0", "@angular/compiler-cli": "~10.0.0", "@nativescript/schematics": "^10.0.2", "@nativescript/webpack": "~2.0.0", "@ngtools/webpack": "~10.0.0", "node-sass": "^4.7.1", "typescript": "~3.9.0" }

webpack.config.js addition { test: /\.js$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015'] }

[gregersen79]

@Cravick what was the solution for this? I'm having the same issue.

[Cravick]

So can't confirm 100% but I had created this project with angular commands which led to me having angular 10+ installed when Nativescript will only plausibly run with version 8 of angular as the highest version.

I simply recreated my project using the Nativescript tns create [<App Name>] --ng and once I reinstalled dependencies and moved my files from old project I confirmed version ~8 across the board it seemed to solve the issue.

Worth noting I found that Angular CLI is not included in this issue as I am running version ~9.