I have just upgraded from Ionic 2 beta to rc3. In order to eliminate compilation errors I changed my Google Maps implementation to use the Ionic native api. This fixed my compilation errors, but I see that the Ionic native api has limitations. For example, there is no fitBounds function that is in googles api.
Question
Is it possible to use Ionic 2 rc3 with using Googles api directly and not the Ionic native api?
If so, How should I configure my app to use the api?
Or, is there any reason why I would want to use the Ionic native api over accessing Googles api directly?
Thanks
package.json
"dependencies": {
"#angular/common": "2.1.1",
"#angular/compiler": "2.1.1",
"#angular/compiler-cli": "2.1.1",
"#angular/core": "2.1.1",
"#angular/forms": "2.1.1",
"#angular/http": "2.1.1",
"#angular/platform-browser": "2.1.1",
"#angular/platform-browser-dynamic": "2.1.1",
"#angular/platform-server": "2.1.1",
"#ionic/storage": "1.1.6",
"#types/google-maps": "^3.2.0",
"#types/meteor": "^1.3.31",
"#types/underscore": "^1.7.36",
"accounts-base-client-side": "^0.1.1",
"accounts-phone": "0.0.1",
"angular2-moment": "^1.0.0-beta.6",
"babel-runtime": "^6.18.0",
"google-maps": "^3.2.1",
"ionic-angular": "2.0.0-rc.3",
"ionic-native": "2.2.3",
"ionicons": "3.0.0",
"meteor-client-side": "^1.3.5",
"meteor-node-stubs": "^0.2.4",
"meteor-rxjs": "^0.4.5",
"meteor-typings": "^1.3.1",
"moment": "^2.15.2",
"rxjs": "^5.0.0-beta.12",
"zone.js": "0.6.26"
},
The other release candidates work with Googles api (noy just ionic-native)
I do have the following in my index.html
<script src="http://maps.google.com/maps/api/js?key=XXXXX"></script>
and in my pckage.json
"#types/googlemaps": "^3.25.40",
(run npm install #types/googlemaps --save-dev)
Added the following to declarations.d.ts
/// <reference path="../node_modules/#types/googlemaps/index.d.ts" />
Related
When I make tns generate component movies, I get terminal log:
Could not find module "#nativescript/schematics".
I tried solutions from https://github.com/NativeScript/nativescript-schematics/issues/130 , but next terminal message is:
Error: Invalid rule result: Instance of class Promise.
package.json:
"dependencies": {
"#angular/animations": "~9.1.0",
"#angular/common": "~9.1.0",
"#angular/compiler": "~9.1.0",
"#angular/core": "~9.1.0",
"#angular/forms": "~9.1.0",
"#angular/platform-browser": "~9.1.0",
"#angular/platform-browser-dynamic": "~9.1.0",
"#angular/router": "~9.1.0",
"#nativescript/angular": "~9.0.0",
"#nativescript/theme": "~2.3.0",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.5.0",
"tns-core-modules": "~6.5.0",
"zone.js": "~0.10.3"
"devDependencies": {
"#angular/cli": "^10.0.4",
"#angular/compiler-cli": "~9.1.0",
"#ngtools/webpack": "~9.1.0",
"nativescript-dev-webpack": "~1.5.0",
"tns-platform-declarations": "~6.5.0",
"typescript": "~3.8.3"
ng --version
#angular-devkit/architect 0.1000.4
#angular-devkit/core 9.1.12
#angular-devkit/schematics 10.0.4
#angular/cli 10.0.4
#ngtools/webpack 9.1.12
#schematics/angular 10.0.4
#schematics/update 0.1000.4
rxjs 6.6.0
typescript 3.8.3
webpack 4.27.1
Try installing nativescript/schematics. I can't see it in your package.json.
npm i -g #nativescript/schematics
You have Angular/cli 10 so it schould work.
I don't see #nativescript/schematics in the package.json. try to have install #nativescript/schematics
npm install --save-dev #nativescript/schematic
See more:
https://github.com/NativeScript/nativescript-schematics/issues/130#issuecomment-524841101
My project has the following dependencies in package.json.
"dependencies": {
"#angular/animations": "^6.0.3",
"#angular/cdk": "^6.1.0",
"#angular/common": "^6.0.3",
"#angular/compiler": "^6.0.3",
"#angular/core": "^6.0.3",
"#angular/forms": "^6.0.3",
"#angular/http": "^6.0.3",
"#angular/material": "^6.1.0",
"#angular/platform-browser": "^6.0.3",
"#angular/platform-browser-dynamic": "^6.0.3",
"#angular/router": "^6.0.3",
"core-js": "^2.4.1",
"json-server": "^0.12.1",
"moment": "^2.22.1",
"rxjs": "^6.2.0",
"rxjs-compat": "^6.2.0",
"zone.js": "^0.8.26"
}
I want to use version 6.1.0 so I updated the package.json to following
"dependencies": {
"#angular/animations": "^6.1.0",
"#angular/cdk": "^6.1.0",
"#angular/common": "^6.1.0",
"#angular/compiler": "^6.1.0",
"#angular/core": "^6.1.0",
"#angular/forms": "^6.1.0",
"#angular/http": "^6.1.0",
"#angular/material": "^6.1.0",
"#angular/platform-browser": "^6.1.0",
"#angular/platform-browser-dynamic": "^6.1.0",
"#angular/router": "^6.0.3",
"core-js": "^2.5.4",
"json-server": "^0.12.1",
"moment": "^2.22.1",
"rxjs": "^6.2.0",
"rxjs-compat": "^6.2.0",
"zone.js": "^0.8.26"
}
But I notice an error from the IDE The installed version didn't match version range for few entries. I thought that if I specify new versions here then the versions will be automatically updated. Isn't that the case? How can I upgrade the dependencies?
I have ng installed both globally (version 6.2.1) and locally (version 6.0.7). Their versions are different. I want to update local to the higher version and to do this, I thought I'll just update entries in package.json.
I suppose the correct way is to run ng update and that should list all the packages that need updating. As I have ng installed both locally and globally, if I just do ng update, I see message ``.
To be sure that I am updating using the local version, I use npx ng update to list the modules which need updating and use npx ng update -all to update all of them.
When I install the plugin it gets successfully installed but I get the following message in my terminal:
nativescript-google-maps-sdk 3.0.0 for ios is not compatible with the
currently installed framework version 2.5.0.
This is my package.json
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "org.nativescript.virtualreality",
"tns-ios": {
"version": "2.5.0"
}
},
"dependencies": {
"#angular/animations": "~4.0.0",
"#angular/common": "~4.0.0",
"#angular/compiler": "~4.0.0",
"#angular/core": "~4.0.0",
"#angular/forms": "~4.0.0",
"#angular/http": "~4.0.0",
"#angular/platform-browser": "~4.0.0",
"#angular/platform-browser-dynamic": "~4.0.0",
"#angular/router": "~4.0.0",
"email-validator": "^1.0.7",
"nativescript-angular": "~1.5.1",
"nativescript-google-maps-sdk": "^2.0.2",
"nativescript-plugin-firebase": "^3.11.4",
"nativescript-telerik-ui": "^1.6.2",
"nativescript-theme-core": "~1.0.2",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.2.0",
"tns-core-modules": "2.5.2",
"zone.js": "~0.8.2"
},
"devDependencies": {
"nativescript-dev-android-snapshot": "^0.*.*",
"nativescript-dev-typescript": "~0.3.5",
"typescript": "~2.1.0"
}
}
Since the tns 3.0 is still in RC phase I don't want to mess up my project. Isn't there any way of using the google-maps in the 2.5.* version of Nativescript
You have to upgrade you nativescript modules to version ~3... "tns-core-modules": "2.5.2",
I have an Ionic v2 app.
I've been trying to implement angular2-google-maps for ages but keep getting the error:
TypeError: ctorParameters.map is not a function
My packages.json (dependencies):
"dependencies": {
"#angular/common": "2.3.1",
"#angular/compiler": "2.3.1",
"#angular/compiler-cli": "2.3.1",
"#angular/core": "2.3.1",
"#angular/forms": "2.3.1",
"#angular/http": "2.3.1",
"#angular/platform-browser": "2.3.1",
"#angular/platform-browser-dynamic": "2.3.1",
"#angular/platform-server": "2.3.1",
"#ionic/storage": "1.1.6",
"angular2-google-maps": "^0.17.0",
"angularfire2": "^2.0.0-beta.6",
"firebase": "^3.6.4",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.3",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.7.4"
},
Looking here and questions similar, I updated all of my packages to (what I think to be) the correct versions (i.e. ionic-angular from rc3 to rc4) as, from what I can see, this error is usually caused by a mismatch of package versions.
I followed this tutorial but he talks of a different problem with integrating with ionic and didn't fix my own.
My app.module.ts follows the same as the tutorial:
import { AgmCoreModule } from "angular2-google-maps/core";
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
// AgmCoreModule.forRoot({
// apiKey: "AIzaSyDUdGaRHXhN5oy5zpETRll8KsHnvx19_9Y"
// }),
AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig)
],
As that code is, it would work. However, if I uncomment AgmCoreModule.forRoot() that is when I get the error.
I cannot find anywhere where anyone has replicated or had the same error.
Also, starting a blank ionic v2 project with the same dependencies and enabling AgmCoreModule.forRoot() works which leads me to believe that it might be my project. However, all the configs are the exact same and I don't know where else would cause this error.
ANSWER:
The error was the angular2-google-maps version. I was using 0.17.0 whereas 0.16.0 is required for an Ionic v2 app. The answer below describes that downgrading your angular version may help as well but I did not deem this necessary. In any case, this is my new set of dependencies in package.json:
"dependencies": {
"#angular/common": "2.2.1",
"#angular/compiler": "2.2.1",
"#angular/compiler-cli": "2.2.1",
"#angular/core": "2.2.1",
"#angular/forms": "2.2.1",
"#angular/http": "2.2.1",
"#angular/platform-browser": "2.2.1",
"#angular/platform-browser-dynamic": "2.2.1",
"#angular/platform-server": "2.2.1",
"#ionic/storage": "1.1.7",
"angular2-google-maps": "0.16.0",
"angularfire2": "^2.0.0-beta.6",
"firebase": "^3.6.4",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
}
You could try downgrading angular maps to 0.16
This seems to be a known issue and is logged in github.
It seems to angular issue rather than ionic version mismatch.
A number of commentators have mentioned it to be working after the downgrade.
Also a fresh ionic 2 project seems to be using 2.2.1 angular version here
You could try downgrading that as well.
Hope it helps.
I'm looking at the official angular2-quickstart...
Looking at package.json, I see :
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.7",
"bootstrap": "^3.3.6"
}
Reading other tutorials on the web, the #angular/... are replaced with angular2. Why is it so? 2 different packages for angular2?
I ask because running the Angular2-quickstart code on my machine the system.src.js file and the app folder are not found...
Also can the #angular thing be the problem of my issue ?
The angular2 name in modules names is for versions before RC (release candidate) versions (beta ones) and the #angular one for RC versions.
RC versions are really fresh so most of tutorials use beta versions...
AFAIK #angular is the Angular namespace name in the NPM repository.