After trying to installing an angularjs component and updating all components via bower my routing does not work anymore. I guess it´s some kind of problem with the version of angular js and ngroute, but being new to angular js / bower I am not sure how to fix it, any guidance is appreciated!
Error:
[$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
Bower file:
{
"name": "asclepius",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.0",
"bootstrap": "^3.2.0",
"angular-animate": "^1.3.0",
"angular-cookies": "^1.3.0",
"angular-resource": "^1.3.0",
"angular-route": "^1.2.0",
"angular-sanitize": "^1.3.0",
"angular-touch": "^1.3.0",
"international-phone-number": "~0.0.7"
},
"devDependencies": {
"angular-mocks": "^1.3.0"
},
"appPath": "app",
"moduleName": "asclepiusApp",
"resolutions": {
"angular": ">=1.2.0"
}
}
Happened something similar today to my coworker. He resolved replacing "^1.3.x" to "1.3.x" in "angular-cookies" and "angular-sanitize". Check if changing it in angular-route resolve the problem.
I think this happens since the release of angular 1.4 a few days ago.
Related
I am using Material UI for React, I updated the Material-UI to the latest version and it is giving me following error
../node_modules/material-ui/styles/withStyles.js
Module not found: Can't resolve '#babel/runtime/core-js/map' in
'C:\Users\User\Documents\code\react\node_modules\material-ui\styles'
I downgraded to the previous version of the Material-UI as well, worked around with installing the correct version of babel as well but still having the same issue.
Here is my package.json
"dependencies": {
"#babel/runtime": "^7.4.0",
"#material-ui/core": "^4.1.3",
"#material-ui/icons": "^3.0.2",
"#material-ui/lab": "^3.0.0-alpha.30",
"axios": "^0.18.1",
"bootstrap": "^4.3.1",
"material-auto-rotating-carousel": "^3.0.1",
"material-auto-rotating-carousel-refurb": "^1.0.1",
"react": "^16.8.6",
"react-animated-slider": "^1.1.4",
"react-bootstrap": "^0.32.4",
"react-dom": "^16.8.6",
"react-motion": "^0.5.2",
"react-responsive-carousel": "^3.1.49",
"react-router": "^3.2.3",
"react-scripts": "2.1.2",
"react-slick": "^0.23.2",
"react-swipeable-views": "^0.13.3",
"react-tap-event-plugin": "^1.0.0",
"slick-carousel": "^1.8.1"
}
I figured this issue out by adding a resolution in my package.json, but it only will work if you use yarn instead of npm.
my fix (if you use yarn)
// in your package.json
...
"resolutions": {
"material-ui/#babel/runtime": "7.0.0-beta.42"
}
...
Why does it work?, because #babel/runtime": "7.0.0-beta.42 still requires core-js as a dependency, in specific it requires core-js ^2.5.3
Alternative fix
If you are not using yarn and rather npm, you can add #babel/runtime": "7.0.0-beta.42 as a devDependency and it should be work fine as well.
I left the link to yarn resolutions, because it might be interesting for you.
I updated react-native to v0.57 and react-native run-ios is failing. I replaced babel-preset-react-native with metro-react-native-babel-preset as suggested in https://www.npmjs.com/package/babel-preset-react-native. here is the error stack trace I am getting.
error: bundling failed: Error: Cannot find module 'babel-preset-react-native' from '/Users/buraktas/workspace/reactnative'
- If you want to resolve "react-native", use "module:react-native"
at Function.module.exports [as sync] (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/node_modules/resolve/lib/sync.js:58:15)
at resolveStandardizedName (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:58:10)
at loadPreset (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:77:20)
at createDescriptor (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:154:9)
at items.map (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
package.json
{
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
"dependencies": {
"axios": "^0.17.1",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"react": "16.2.0",
"react-native": "^0.57.8",
"react-native-branch": "^2.3.0",
"react-native-camera": "^1.0.0",
"react-native-datepicker": "^1.6.0",
"react-native-deep-linking": "^2.1.0",
"react-native-fabric": "^0.5.1",
"react-native-keyboard-aware-scroll-view": "^0.4.3",
"react-native-modal": "^4.1.1",
"react-navigation": "^1.0.0-beta.22",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-form": "^7.1.2",
"redux-saga": "^0.16.0",
"stripe-client": "^1.1.3"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-flow": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.4.2",
"babel-preset-airbnb": "^3.2.0",
"detox": "^9.0.4",
"eslint": "^5.12.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.12.3",
"eslint-plugin-react-native": "^3.6.0",
"jest-cli": "^23.6.0",
"metro-react-native-babel-preset": "^0.51.1",
"react-test-renderer": "16.0.0",
"remote-redux-devtools": "^0.5.12"
},
"jest": {
"preset": "react-native"
}
}
.babelrc
{
"presets": [
"airbnb",
"#babel/preset-env",
"module:react-native",
"module:metro-react-native-babel-preset"
]
}
Deleting .babelrc file will fix this for you.
Please check react native upgrade helper
https://react-native-community.github.io/upgrade-helper
and specify your current React native version and the version to update (0.57 in your case)
You will see changes need to do in your case to make the code compatible with updated version
Looking at your package.json it looks like all you have done is upgrade the version of react-native to the latest version.
Unfortunately it is not as simple as changing the version number in the package.json. You don't state which version of react-native you were using before, but as you are using React 16.2.0 I would hazard a guess that you were on react-native 0.52 or 0.53.
To upgrade you should look at the diff that is provided between your version and the version that you upgrading to. rn-diff-purge shows the changes between that need to be performed. For upgrading 0.52.0 to 0.57.8 you can see the changes here, for 0.53.0 to 0.57.8 you can see the changes here.
You can check the changelog https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md to see more specific requirements for upgrading between the versions.
It is also worthwhile looking at https://facebook.github.io/react-native/docs/upgrading for tips on how to perform an upgrade.
I have the following bower.json file:
{
"private": true,
"dependencies": {
"angular": "~1.5.0",
"angular-mocks": "^1.5.7",
"bootstrap": "^3.3.6",
"bootstrap-rtl": "^3.4.0",
"font-awesome": "^4.6.3",
"moment": "^2.13.0",
"angular-animate": "^1.5.6",
"angular-sanitize": "^1.5.6",
"angular-ui-router": "~0.2.15",
"angular-translate": "^2.11.0",
"angular-touch": "^1.5.7",
"angular-messages": "^1.5.6",
"angular-cookies": "^1.5.8",
"angular-ui-grid": "^3.1.1",
"angular-ui-sortable": "^0.14.2",
"angular-bootstrap-affix": "^0.2.2",
"theia-sticky-sidebar": "^1.4.0",
"angular-ui-router-title": "^0.0.4",
"angularjs-slider": "^4.0.2",
"angular-fcsa-number": "^1.5.3",
"angularPrint": "angular-print#^0.3.8",
"ng-virtual-keyboard": "^0.3.0",
"keyboard": "^1.26.1",
"angular-spinner": "^0.8.1",
"ng-ip-address": "^1.1.10",
"file-saver": "^1.3.2",
"ng-iban": "^1.1.0",
"pdfmake": "^0.1.20",
"ng-device-detector": "^3.0.1",
"checklist-model": "^0.10.0",
"angular-dynamic-number": "^2.1.1",
"ng-file-upload": "^12.2.13",
"ng-file-upload-shim": "^12.2.13",
"angular-ui-select": "^0.19.6",
"angular-dragula": "^1.2.8",
"angular-drag-and-drop-lists": "^2.0.0",
"angular-slick-carousel": "^3.1.7",
"angular-slick": "^0.2.1",
"drag-drop-webkit-mobile": "^1.2.0",
"iban": "^0.0.8",
"highcharts": "^5.0.9"
}
}
I want to update only AngularJS to version 1.5.8. What is the best way to do this update without any headache? I tried to install bower install angular#1.5.8 --save , but when other team members entered bower-update their whole project broke because a lot of packages where updated.
Any bright idea how to only update AngularJS?
Try "angular": "1.5.8", and run bower update not bower-update. You may going to switch to tilde ~ on all your dependencies to ensure only the minor versions going to be updated. Note that angular-mocks is not corresponding with the AngularJS version.
In the simplest terms, the tilde matches the most recent minor version
(the middle number). ~1.2.3 will match all 1.2.x versions but will
miss 1.3.0.
The caret, on the other hand, is more relaxed. It will update you to
the most recent major version (the first number). ^1.2.3 will match
any 1.x.x release including 1.3.0, but will hold off on 2.0.0.
{
"private": true,
"dependencies": {
"angular": "1.5.8",
"angular-mocks": "~1.5.7",
"bootstrap": "~3.3.6",
"bootstrap-rtl": "~3.4.0",
"font-awesome": "~4.6.3",
"moment": "~2.13.0",
"angular-animate": "~1.5.6",
"angular-sanitize": "~1.5.6",
"angular-ui-router": "~0.2.15",
"angular-translate": "~2.11.0",
"angular-touch": "~1.5.7",
"angular-messages": "~1.5.6",
"angular-cookies": "~1.5.8",
"angular-ui-grid": "~3.1.1",
"angular-ui-sortable": "~0.14.2",
"angular-bootstrap-affix": "~0.2.2",
"theia-sticky-sidebar": "~1.4.0",
"angular-ui-router-title": "~0.0.4",
"angularjs-slider": "~4.0.2",
"angular-fcsa-number": "~1.5.3",
"angularPrint": "angular-print#~0.3.8",
"ng-virtual-keyboard": "~0.3.0",
"keyboard": "~1.26.1",
"angular-spinner": "~0.8.1",
"ng-ip-address": "~1.1.10",
"file-saver": "~1.3.2",
"ng-iban": "~1.1.0",
"pdfmake": "~0.1.20",
"ng-device-detector": "~3.0.1",
"checklist-model": "~0.10.0",
"angular-dynamic-number": "~2.1.1",
"ng-file-upload": "~12.2.13",
"ng-file-upload-shim": "~12.2.13",
"angular-ui-select": "~0.19.6",
"angular-dragula": "~1.2.8",
"angular-drag-and-drop-lists": "~2.0.0",
"angular-slick-carousel": "~3.1.7",
"angular-slick": "~0.2.1",
"drag-drop-webkit-mobile": "~1.2.0",
"iban": "~0.0.8",
"highcharts": "~5.0.9"
}
}
Only updating your angular package will work locally, but when a new project needs to be setup and you want to install your dependencies you'll run into this problem any ways. I suggest you setup your dependencies how you want them and make sure you don't allow deviations to version you don't want to get installed. I'll add some info on how interpret the version numbers.
Using bower update <package_name> will update only that package to the version listed in the bower.json
Assume a version number like this: 1.5.0.
Each number has a mean, 1 is the major version, 5 is the minor version and 0 is the patch number. So like this major.minor.patch
A caret (^) means you can't change major version, but you can change minor and patch version. So ^1.5.0 can range from 1.5.0 until but no including 2.0.0. So in your cause because you had ^1.5.0, Angular will update to the latest non-major version change which is 1.6.3
A tilde (~) means only the patch version change (or minor version if patch isn't specified in the version)
Read more about it here: semver
UPDATE It seems the problem is I can't update/edit my post. Every time I create a new post, then it enter dead loop. Please help me T-T
Recently I started a program using keystoneJS as my CMS.
Everything goes fine but this Post problem.
I have found if I install keystone-demo via yo keystone(using the KeystoneJS generator made with Yeoman) then publishing post can work, but if I install keystone manually, the problem comes...
In Google Inspect Console, there is a error-
"TypeError: undefined is not an object (evaluating 'refList.expandColumns')"
I guess it is the keystone version problem.
This is my package.json file
{
"name": "keystone-demo",
"version": "1.0.1",
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/JedWatson/keystone-demo.git"
},
"dependencies": {
"keystone": "https://github.com/keystonejs/keystone.git",
"async": "^1.5.0",
"lodash": "^3.10.1",
"csv": "^0.4.6",
"gulp": "^3.9.1",
"gulp-less": "^3.1.0",
"gulp-shell": "^0.5.2",
"gulp-watch": "^4.3.5",
"pug": "^2.0.0-alpha6"
},
"scripts": {
"start": "node keystone.js"
}
}
And this is the package.json file in that can work normally version
{
"name": "keystone",
"version": "0.0.0",
"private": true,
"dependencies": {
"keystone": "^0.3.16",
"async": "^1.5.0",
"underscore": "^1.8.3",
"node-sass": "^3.3.2",
"node-sass-middleware": "^0.9.7",
"dotenv": "^1.1.0"
},
"devDependencies": {
"gulp": "^3.7.0",
"gulp-jshint": "^1.9.0",
"jshint-stylish": "^0.1.3",
"gulp-shell": "^0.5.0",
"gulp-watch": "^4.3.5",
"gulp-sass": "^2.0.4"
},
"engines": {
"node": ">=0.10.22",
"npm": ">=1.3.14"
},
"scripts": {
"start": "node keystone.js"
},
"main": "keystone.js"
}
You're loading the latest keystone version from github, which is not always stable. This is probably the reason for the error you're seeing.
I recommend using the latest version published to npm (0.3.22 at time of writing) instead.
Update the first line in your dependencies to this, and it will work:
"keystone": "^0.3.22",
To add keystone to a new project you can also type npm install --save keystone
I have generated an app using Yeoman-Angular Generator, but the angular.js and other Angular files are missing from the project. I can see these dependencies in the bower.json file as follows:
{
"name": "mi-portfolio",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.6",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"jquery": "~1.10.2",
"bootstrap": "~3.0.3",
"angular-cookies": "1.2.6",
"angular-sanitize": "1.2.6"
},
"devDependencies": {
"angular-mocks": "1.2.6",
"angular-scenario": "1.2.6"
}
}
But, the JS files themselves aren't available. So, I get the 'angular is not defined' error when running the app. I ran the commands as given in the Yeoman-Angular Generator's documentation. Is there something I'm missing here?
Try running bower install, sometimes this fails when running Yeoman so you've gotta attempt manually.