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.
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"
},
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).
Currently I'm using React Native 0.42.0 with React 15.4.2, and there is a bugfix: Fix crash if native code tries to update the size of a modal view after JS has removed it in the 0.44.0 which is the latest release of the React Native. I wanted to update for the latest version but it's require 16.0.0-alpha.6 React version. There is problems, because the other npm packages don't support the alpha version of the React and they require the 15.x.x version.
What is the proper solution for this problem?
There is my related part of the package.json:
"dependencies": {
"axios": "^0.16.1",
"lodash": "^4.17.4",
"querystring": "^0.2.0",
"react": "16.0.0-alpha.6",
"react-addons-pure-render-mixin": "^15.4.2",
"react-native": "0.44.0",
"react-native-cookies": "^3.1.0",
"react-native-device-info": "^0.10.2",
"react-native-lazyload": "^1.1.0",
"react-native-router-flux": "^3.38.0",
"react-native-swiper": "^1.5.4",
"react-native-vector-icons": "^4.0.0",
"react-navigation": "^1.0.0-beta.7",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
},
I don't know if this can be taken as a response but in my case having the same problem i only updated into the latest version possible without depending on the alpha version of react (0.42), and we'll need to wait until the next React.js versions comes out.
The official explain that i heard was that react-native take some React Fiber considerations that are not included on React.js for now
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..."
I have a node.js + Express + express-handlebars app deployed on Heroku. When running the app the console shows that the jquery file was not found (404) error. This creates a cascading effect and resulting dependant libraries like Bootstrap, Datatables etc fail.
The following is my package.json file
{
"name": "test-node",
"version": "0.0.1",
"description": "Test node",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/username/repo.git"
},
"author": "Neeraj Jadhav",
"license": "ISC",
"bugs": {
"url": "https://github.com/username/repo/issues"
},
"homepage": "https://github.com/username/repo",
"dependencies": {
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.15.0",
"cookie-parser": "^1.4.1",
"express": "^4.13.4",
"express-handlebars": "^3.0.0",
"express-session": "^1.13.0",
"method-override": "^2.3.5",
"moment": "^2.12.0",
"mysql": "^2.10.2",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"sendgrid": "^2.0.0",
"serve-favicon": "^2.3.0",
"shortid": "^2.2.4"
},
"engines": {
"node": "0.10.28",
"npm": "1.4.9"
}
}
The following is the screenshot of my node js project folder structure.
It is unable to find the jquery-1.12.1.min.js
In my app.js I moved the line of code referencing the static files above everyone else, but it still does not work. If I open the jquery Heroku link in a new tab and add public before js, like this: https://admin-violet.herokuapp.com/public/js/jQuery-1.12.1.min.js , it shows the same error.
Any idea on why it is unable to find the jquery file? I have deployed node js projects on Heroku before but never faced this issue.
Appreciate the help.
You need to use lowercase letters for heroku and node, note the error is looking for jQuery, just point it to jquery and you should be good.
Relevant Docs:
Heroku Docs
Some languages encourage filenames that match class names, like MyClass and ‘MyClass.js’. Don’t do that in node. Instead, use lowercase files:
let MyClass = require('my-class');
Node.js is the rare example of a Linux-centric tool with great cross-platform support. While OSX and Windows will treat ‘myclass.js’ and ‘MyClass.js’ equivalently, Linux won’t. To write code that’s portable between platforms, you’ll need to exactly match require statements, including capitalization.
The easy way to get this right is to just stick with lowercase filenames for everything, eg ‘my-class.js’.
In your command line tool - try to restart the Heroku server. heroku restart or try to read the logs heroku logs -t the "-t" is a flag for tail will show you where it errors out on the server side within Heroku.