I wanted to integrate Google Maps with my Angular project. In the pilot version, I was just following this link https://angular-maps.com/guides/getting-started/. Currently, I am stuck in error:
node_modules/#agm/core/lib/directives/map.d.ts:232:43 - error TS2694: Namespace 'google.maps' has no exported member 'MouseEvent'
232 mapDblClick: EventEmitter<google.maps.MouseEvent>;
I went to the file location and got this
mapClick: EventEmitter<google.maps.MouseEvent | google.maps.IconMouseEvent>;
/**
* This event emitter gets emitted when the user right-clicks on the map (but not when they click
* on a marker or infoWindow).
*/
mapRightClick: EventEmitter<google.maps.MouseEvent>;
/**
* This event emitter gets emitted when the user double-clicks on the map (but not when they click
* on a marker or infoWindow).
*/
mapDblClick: EventEmitter<google.maps.MouseEvent>;
/**
Dependencies:
npm install #agm/core
npm i #types/googlemaps
I found, that the workaround mentioned in some of the other answers does not work if you are using #agm/core. I came across the same error when updating to Angular 11.
It seems, that Angular 11 does not work properly in combination with #agm/core 3.0.0-beta.0 (newest version). Try to downgrade #agm/core to the previous version 1.1.0. This worked for me.
"dependencies": {
"#agm/core": "^1.1.0"
}
It work around solution found on this github response
"dependencies": {
"#angular/google-maps": "^11.0.0"
}
then add
"devDependencies": {
"#types/googlemaps": "3.39.14"
}
Guys the solution is already merged,
https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50565#issuecomment-759785211
try installing #types/googlemaps#3.43.2 from npm.
I faced the same issue with Angular 11. Here is the combination that worked fine for me (package.json):
"dependencies": {
...
"#agm/core": "^1.1.0",
...
}
"devDependencies": {
...
"#types/googlemaps": "^3.39.12",
...
}
P.S.: Some tutorials recommend to add #google/maps but I did not add that package.
Had the same error on my Angular 12 project but it worked after downgrading #types/googlemaps.
"dependencies": {
"#agm/core": "^3.0.0-beta.0",
},
"devDependencies": {
"#types/googlemaps": "^3.39.12",
}
I'm adding a new answer with a radical solution.
TL;DR:
I got rid of agm/core and replaced it by the ngx-autocomplete package. I also updated my angular to v12 in the process, but that was most likely not necessary. Ref to article.
Long version:
Previously, I needed to use 2 packages
agm/core to get google-map edition that provided onAddressChange in my components so I could get the google place ID, latLng, etc
angular/google-maps for showing a map with a marker on an address
those packages need to be version-synchronized with a typescript #type/googlemaps package
After looking at various answers I found many things to watch our for
Version numbers (and presence or absence of "^" is important)
Having the #type package in dependencies and not devDependencies may help
Adding "googlemaps" to the compilerOptions.types array in all tsconfig*.json (.app.json, .spec.json, tsconfig.json)
Despite this and trying various configurations, I could not make it work. It seems like I needed, in order to fix all my bugs, both
#types/googlemaps": >= 3.39.14
#types/googlemaps": <= 3.39.12
With errors like
Generic type 'MapHandlerMap' requires 1 type argument(s).
or
Namespace 'google.maps' has no exported member 'MouseEvent'
My mindset was the following: instead of downgrading version until I find the good one, just bump everything to the latest version (using ng update it went rather smoothly), which included all angular modules, and then get rid of incompatible libraries that are not maintained and/or deprecated.
Turns out agm/core became the main culprit. Just look at how long it has been stuck at 3.0.0-beta.0, and the semver patch version beta.0 is already a big hint that you should not use this package.
After googling a bit, I found out that the ngx-google-places-autocomplete package was much more straightforward to implement, and offered a much simpler interface with only one handler to implement (just look at the article I linked in the tl;dr - you can implement it in a few secs). It was also compatible with angular/google-maps and the type package without doing anything else.
I mentioned that I upgraded to angular 12, but I believe you do not need to do this, and ngx-google-places-autocomplete can most likely work with anterior angular versions. Just get rid of agm.
I had same issue with Angular-Cli 11 and "#agm/core": "^3.0.0-beta.0",
I resolved by adding #types/googlemaps: "3.39.12" to my devDependencies, now it works !
none of the above worked for me, my angular version is 10 and as per this the issue is with compatibility of #angular/googlemaps and #types/googlemaps on which angular team is currently working.
With the latest version, MouseEvent is now named MapMouseEvent.
Tied with
"#angular/google-maps": "^13.2.3",
"#types/google.maps": "3.47.4"
be careful tho download this one not to download #types/googlemaps without the *.*, which is a deprecated library
I found this solution and work for me.
I use Angular 10
because #agm/core support latest angular v.10
Solution below,
npm i #agm/core#^3.0.0-beta.0
npm i #types/googlemaps#3.39.13 --save-dev
Full code
{
"name": "web-vacc-care-ng10",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^3.0.0-beta.0",
"#angular/animations": "~10.2.4",
"#angular/common": "~10.2.4",
"#angular/compiler": "~10.2.4",
"#angular/core": "~10.2.4",
"#angular/forms": "~10.2.4",
"#angular/platform-browser": "~10.2.4",
"#angular/platform-browser-dynamic": "~10.2.4",
"#angular/router": "~10.2.4",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1002.3",
"#angular/cli": "~10.2.3",
"#angular/compiler-cli": "~10.2.4",
"#types/googlemaps": "^3.39.13",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}
Work for me.
Since upgrading to Angular 11 I started to experience this issue.
The work around is; in your "node_modules/#agm/core/lib/services/" folder, you will need to change MapHandlerMap to MapMouseEvent at a few places (check your terminal log to see where).
Related
I am using ANTd with a React application I am building for a school project. The App runs fine however, on startup I get the following: craco: *** Cannot find ESLint loader (eslint-loader). *** which is concerning. I have looked into this and apparently this link https://github.com/gsoft-inc/craco/pull/219 offers support for the issue. I am not advanced enough to know how to apply this fix to my own React project and I feel myself and other beginners would benefit greatly from an explanation on how to do so. Thanks to whoever can help!
For react, this happens when we have DISABLE_ESLINT_PLUGIN=true in our environment variable (or in the .env.production file). Instead, we should disable ESLint in craco.
Remove DISABLE_ESLINT_PLUGIN=true from environment variable or env file.
Then in craco.config.js, add this:
module.exports = {
// ...
eslint: {
enable: false
},
// ...
}
This worked for me too. Run npm install after making changes in craco.config profile
Was an easy fix.
In package.json replace/add the following dependencies:
{
"name": "antd-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.1.1",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.6.3",
"antd": "^4.12.2",
"craco-less": "^1.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
"web-vitals": "^1.1.0"
},
Currently learning React JS, I am still newbie regarding these technologies.
After updating the webpack from 4.30.0 to 5.10.0 then I run npm start, some errors appeared as below. I have tried to delete node_modules and reinstall, then npm start, it doesn't change anything.
Dependencies :
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-dev-middleware": "4.0.2",
"webpack-hot-middleware": "2.25.0",
"webpack-pwa-manifest": "4.3.0",
Error :
Solved similar issue with upgrading
"webpack-dev-server": "^4.0.0-beta.3",
I believe 3.x is not fully compatible.
When wrapping a component with connect()(Component), I am getting an error on my React Native application. "_react.default.memo is not a function (In _react.default.memo(ConnectFunction), _react.default.memo is undefined. How can I resolve this issue?
Screenshot of the error
I believe this issue is based on my version numbers with React and Redux. But I am unable to locate the culprit. This application is in very early development, but perhaps I just forgot to connect something with my store.
Currently my versions from package.json are the following
"dependencies": {
"expo": "^32.0.6",
"react": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.8.1",
"react-redux": "^7.0.2",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"schedule": "^0.4.0"
}
I have tried rolling back react-redux to 6.0.0 and react to 16.5.0 as described in this thread but, I get a different error.
Unable to resolve "./utils/batch" from "node_modules/react-redux/lib/index.js"
I have tried uninstalling and reinstalling react-redux. (including deleting the folder). I don't even see a call to utils/batch inside that index.js file.
Any help would be greatly appreciated. The component renders correctly before connect is added. Exception happens when export default connect()(ComponentName) is invoked.
if needed, my repository is found here. Since then, though, I have toyed with the versions.
Switching to React Redux 6.0.0 npm install react-redux#6.0.0.
In order to get rid of the Unable to resolve "./utils/batch" from "node_modules/react-redux/lib/index.js"
Clear expo caches with expo r -c.
https://forums.expo.io/t/how-to-clear-the-react-native-packager/1352
I think I was just able to resolve this. I finally caved and installed yarn letting Yarn take over the dependency install seemed to have worked.
My dependencies are running at
"dependencies": {
"expo": "^32.0.6",
"react": "16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.8.1",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"schedule": "^0.4.0"
},
and my app is back to running with everything acting compatible again. Not sure what was done differently with Yarn. But I am relieved that I got this back up. I hope this helps others!
I've been trying to upgrade medium sized project from Angular version 1.2.16 to 1.6.4. The problem here is, I can't jump from one version to another, so I have to use both versions at the same time in the project. However, I couldn't able to find a well prepared guide to follow. There are some different steps which is described in SO or in Github pages. But anyhow, I couldn't manage it.
Here are some SO links that I've been reading during this time.
1 - Multiple versions of AngularJS in one page
2 - Supporting Multiple Versions of AngularJS
3 - https://github.com/angular-translate/angular-translate/wiki/How-to-use-a-different-version-of-AngularJS-using-Bower
And below is my bower.json:
{
"name": "takademi",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.16",
"json3": "~3.3.1",
"es5-shim": "~3.1.0",
"angular-cookies": "1.2.16",
"angular-sanitize": "1.2.16",
"angular-animate": "1.2.16",
"angular-route": "1.2.16",
"angular-bindonce": "~0.3.1",
"restangular": "~1.4.0",
"angular-base64": "~2.0.2",
"lodash": "~2.4.1"
},
"devDependencies": {
"angular-mocks": "1.2.16",
"angular-scenario": "1.2.16"
},
"appPath": "app"
}
Can you suggest any good guide, blog, video tutorial for me to follow?
Thanks in advance.
this is probably a newbie question, but i do not understand why bower (1.7.9) cannot find a suitable version for Angular when i run:
bower install
or when it cannot find a suitable version for Angular-translate when i run:
bower update
(Why does it even give me a different error when i run either command in the above?)
I have updated every package to their latest versions and I did not find any package which would require an older version of Angular. Here is my bower.json:
{
"name": "test",
"homepage": "http://www.google.nl",
"version": "0.2.1",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"angular": "1.5.9",
"angular-animate": "1.6.0-rc.2",
"angular-bootstrap": "2.3.0",
"angular-cookies": "1.6.0-rc.2",
"angular-hotkeys": "0.2.2",
"angular-i18n": "1.6.0-rc.2",
"angular-route": "1.6.0-rc.2",
"angular-translate": "2.13.1",
"angular-sanitize": "1.6.0-rc.2",
"angular-translate-loader-static-files": "2.8.1",
"angular-ui-bootstrap-datetimepicker": "2.0.3",
"angular-loading-bar": "0.9.0",
"jquery": "3.1.1",
"moment": "2.17.1",
"ng-dialog": "0.6.4",
"ng-focus-if": "1.0.7",
"ng-tags-input": "3.1.1",
"ngInfiniteScroll": "https://github.com/hlsolutions/ngInfiniteScroll.git#scroll-on-any-lement",
"angular-ui-select": "0.19.6",
"placeholders": "https://github.com/jamesallardice/Placeholders.js.git#~4.0.1",
"angular-atomic-notify": "~1.0.3",
"underscore": "https://github.com/components/underscore.git#~1.8.3",
"angulartics-google-analytics": "0.4.0",
"angular-ui-tinymce": "~0.0.17",
"angular-collection": "~0.5.2",
"angular-mocks": "1.6.0-rc.2",
"angular-translate-handler-log": "2.13.1"
}
}
The problem I see is related to:
"angular-translate": "2.13.1",
...
"angular-translate-loader-static-files": "2.8.1",
The problem is:
- you are requesting exact versions
- angular-translate-loader-static-files also requests angular-translate, but it demands the same version (2.8.1)
- bower does not allow multiple version of the same library
One solution would be:
"angular-translate-loader-static-files": "2.13.1"
The same problem is with angular, you should use "angular": "1.6.0-rc.2" since you already request this version for other modules that depend on angular.
However, this is not necessarily the best way to go, because for example I see you are using some libraries that want angular < 1.6 (ngInfiniteScroll) so you will not be able to make these work in your project if you really want to use the 1.6 version.
A better idea would be to require version more loosely (e.g. "angular": ">=1.5.x"), then let bower find the most suitable version for all your dependencies - but this will most likely require you to work with older versions or risk incompatibility issues.
It often happens when you already have an old version of a library (here it's angular) downloaded in your bower_components of your project.
Generally to fix this, i just empty my bower_components before redo a bower install and everything get back to the normal.
Hope this will help in your case.
See if the final answer to a similar question helps
"Instead of running bower install library -save I did added the latest versions of the libraries directly to my bower.json and added the resolutions..."