Modal dialog based on Ionic and AngularJS leads to freezing the app - javascript

I took over a project with AngularJS, Ionic and Cordova (plugins).
Due to another problem, I had to update my infrastructure (including an update to XCode 7.2.1), which looks like the following now:
npm list -g --depth=0
├── bower#1.7.7
├── cordova#6.0.0
├── grunt-cli#0.1.13
├── grunt-sass#1.1.0
├── ionic#1.7.14
├── ios-deploy#1.8.5
├── ios-sim#5.0.6
├── n#2.1.0
├── to#0.2.9
└── update#0.4.2
npm list --depth=0
├── cordova#6.0.0
├── grunt#0.4.5
├── grunt-angular-templates#0.5.9
├── grunt-autoprefixer#0.4.2
├── grunt-bump#0.3.4
├── grunt-cli#0.1.13 extraneous
├── grunt-concurrent#0.4.3
├── grunt-contrib-clean#0.5.0
├── grunt-contrib-concat#0.3.0
├── grunt-contrib-connect#0.5.0
├── grunt-contrib-copy#0.4.1
├── grunt-contrib-cssmin#0.7.0
├── grunt-contrib-htmlmin#0.1.3
├── grunt-contrib-jshint#0.7.2
├── grunt-contrib-uglify#0.2.7
├── grunt-contrib-watch#0.5.3
├── grunt-conventional-changelog#1.2.2
├── grunt-githooks#0.3.1
├── grunt-htmlhint#0.4.1
├── grunt-jscs#1.5.0
├── grunt-newer#0.6.1
├── grunt-ng-annotate#0.2.3
├── grunt-ng-constant#0.5.0
├── grunt-ngdocs#0.2.9
├── grunt-sass#1.1.0
├── grunt-usemin#2.0.2
├── grunt-wiredep#1.7.1
├── ionic#1.7.14
├── jshint-stylish#0.1.5
├── load-grunt-tasks#0.2.1
├── lodash#2.4.2
├── node-sass#3.4.2
└── time-grunt#0.2.10
npm ERR! extraneous: grunt-cli#0.1.13
cordova platform version
Installed platforms: android 4.1.1, ios 4.0.1
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, osx, webos
cordova plugin list
cc.fovea.cordova.purchase 4.0.0 "Purchase"
cordova-plugin-console 1.0.2 "Console"
cordova-plugin-crosswalk-webview 1.5.0 "Crosswalk WebView Engine"
cordova-plugin-inappbrowser 1.2.1 "InAppBrowser"
cordova-plugin-splashscreen 3.1.0 "Splashscreen"
cordova-plugin-statusbar 2.1.2-dev "StatusBar"
ionic-plugin-keyboard 1.0.8 "Keyboard"
Now when i.e. jumping into a "saving-function" based on JavaScript, the app stalls and the modal dialog is not hiding anymore. Here is some sample code:
HTML
<div class="buttons">
<a class="button button-icon icon ion-checkmark-circled" ng-click="save()"></a>
</div>
JavaScript
$scope.save = function ()
{
if ($scope.dosomething.length < 1)
{
$scope.$emit('toast', 'Do not do this!');
return;
}
}
Any idea how to fix this?

cordova-ionic 4.1.0-dev was the "solution". More can be seen here.

Related

Cannot find react-native

I get this odd error:
ERROR in ./node_modules/react-native-maps/lib/MapMarkerNativeComponent.js 14:48-113
Module not found: Error: Can't resolve 'react-native/Libraries/Utilities/codegenNativeCommands' in '/home/ubuntu/pdev/me/website/node_modules/react-native-maps/lib'
However, I have react-native installed:
ubuntu#foo:~/pdev/me/website$ npm list | grep react-native
├── #react-native-async-storage/async-storage#1.17.10
├── #react-native-picker/picker#2.4.4
├── react-native-elements#3.4.2
├── react-native-expo-viewport-units#0.0.8
├── react-native-gesture-handler#2.6.0
├── react-native-maps#1.3.1
├── react-native-safe-area-context#4.3.3
├── react-native-text-size#4.0.0-rc.1
├── react-native-vector-icons#9.2.0
├── react-native-web#0.18.9
├── react-native#0.70.0

Project cannot locate imported d3-graphviz module

The project is located at https://github.com/eric-g-97477/blog-ember-d3 which is a fork of this project.
The output of npm list is:
$ npm list
blog-ember-d3#0.0.0
├── #ember/jquery#0.6.0
├── #ember/optional-features#0.7.0
├── broccoli-asset-rev#3.0.0
├── d3-graphviz#4.1.1
├── d3-selection#3.0.0
├── d3#5.9.2
├── ember-ajax#5.0.0
├── ember-cli-app-version#3.2.0
├── ember-cli-babel#7.7.3
├── ember-cli-dependency-checker#3.1.0
├── ember-cli-eslint#5.1.0
├── ember-cli-htmlbars-inline-precompile#2.1.0
├── ember-cli-htmlbars#3.0.1
├── ember-cli-inject-live-reload#1.10.2
├── ember-cli-sri#2.1.1
├── ember-cli-template-lint#1.0.0-beta.3
├── ember-cli-uglify#2.1.0
├── ember-cli#3.10.1
├── ember-d3#0.5.1
├── ember-data#3.10.0
├── ember-export-application-global#2.0.0
├── ember-load-initializers#2.0.0
├── ember-maybe-import-regenerator#0.1.6
├── ember-qunit#4.4.1
├── ember-resolver#5.1.3
├── ember-source#3.10.0
├── ember-welcome-page#4.0.0
├── eslint-plugin-ember#6.4.1
├── eslint-plugin-node#9.0.1
├── loader.js#4.7.0
└── qunit-dom#0.8.5
I am trying to import by doing:
import { graphviz } from "d3-graphviz";
and that generates the error:
Uncaught Error: Could not find module `d3-graphviz` imported from `blog-ember-d3/libs/donut-chart`
I am sure this is something silly, but I am not sure what has gone wrong.
My goal was to start with a d3 based project that worked and determine how to get d3-graphviz working within it.
If you add ember-auto-import, you should be able to import from d3-graphviz. ember-auto-import sets up webpack and allows things to "just work" from npm, and is standard in all ember apps since ember-cli 3.16
Also, if you're starting a new app, you may want to update ember-cli so you get the latest blueprint.
npm install -g ember-cli#latest

Cloud not run my Vue CLI App after update Node.js 12 to 14

I want you help to get my Vue CLI App runing in development server of my local environment.
I can not get the App runing after update Node.js 12 to 14 because I am getting an error - attached screenshot enter image description here
My environment include:
Node.js v14.17.1 x64
Windows 10 x64
Version 91.0.4472.114
├── #fortawesome/fontawesome-free#5.15.3
├── #fortawesome/fontawesome-svg-core#1.2.35
├── #fortawesome/free-solid-svg-icons#5.15.3
├── #fortawesome/vue-fontawesome#0.1.10
├── #popperjs/core#2.9.2
├── #vue/cli-plugin-babel#4.4.6
├── #vue/cli-plugin-router#4.4.6
├── #vue/cli-service#4.5.13
├── #vue/eslint-config-prettier#6.0.0
├── babel-eslint#10.1.0
├── bootstrap#4.6.0
├── core-js#3.15.2
├── css-loader#4.3.0
├── eslint-plugin-import#2.23.4
├── eslint-plugin-node#11.1.0
├── eslint-plugin-prettier#3.4.0
├── eslint-plugin-promise#4.3.1
├── eslint-plugin-standard#4.1.0
├── eslint-plugin-vue#6.2.2
├── eslint#6.8.0
├── firebase-admin#9.10.0
├── firebase#8.7.0
├── jquery#3.6.0
├── moment#2.29.1
├── node-sass#6.0.1
├── npm#7.19.1
├── popper.js#1.16.1
├── prettier#1.19.1
├── sass-loader#12.1.0
├── serve#12.0.0
├── style-loader#1.3.0
├── vue-eslint-parser#7.7.2
├── vue-fragment#1.5.2
├── vue-router#3.5.2
├── vue-template-compiler#2.6.14
├── vue#2.6.14
├── webpack-dev-server#3.11.2
└── webpack#5.0.0
enter image description here

Spring boot does not serve assets in resources folder when started with IntelliJ

I am doing pretty much this tutorial. Basically you have a pom which controls two modules, the frontend module and the backend module.
Environment: IDE: Intellij, spring-boot, Vue.js
I initialized the frontent module using vue init webpack frontend. I added the pom to the backend module which copies the assets into the backend module asset/public folder. After mvn clean install all the content is in the ressources/public folder, but when I view the browsers sources it does not show any of them.
The resources folder looks like this:
└── resources
├── application.properties
└── public
├── index.html
└── static
├── css
│   ├── app.30790115300ab27614ce176899523b62.css
│   └── app.30790115300ab27614ce176899523b62.css.map
└── js
├── app.b22ce679862c47a75225.js
├── app.b22ce679862c47a75225.js.map
├── manifest.2ae2e69a05c33dfc65f8.js
├── manifest.2ae2e69a05c33dfc65f8.js.map
├── vendor.42fc6c515ccdfe89bd76.js
└── vendor.42fc6c515ccdfe89bd76.js.map
I just noticed that running java -jar backend/target/backend-0.0.1-SNAPSHOT.jar solves the problem. But when I start the application using intellij it does not work out.
Full tree (directories only):
├── fileconverter
│   ├── backend
│   │   ├── src
│   │   └── target
│   ├── frontend
│   │   ├── build
│   │   ├── config
│   │   ├── node
│   │   ├── node_modules
│   │   ├── src
│   │   ├── static
│   │   ├── target
│   │   └── test
│   └── target
│   ├── classes
│   └── test-classes
Okay, as I am having two modules IntelliJ used the classpath of the whole project instead of the backend module.
After changing the path in the configuration to: Use classpath of module: backend everything works fine.

Setting up Angular phonecat application on node

Im newbie to Angular and trying to setup angular phonecat application.
I have downloaded the code from here
https://docs.angularjs.org/tutorial/
and installed a nodejs.
Now, I'm not sure how to map the angular application to run with nodejs.
From other links, I see everyone run a webserver.js file but I don't see anything under the scripts directory.
scripts]$ tree .
.
├── private
│   ├── old
│   │   ├── format-json.sh
│   │   ├── goto_step.bat
│   │   ├── goto_step.sh
│   │   ├── README.md
│   │   ├── ScrapeData.js
│   │   └── snapshot.sh
│   ├── push-to-github.sh
│   ├── README.md
│   ├── retag.sh
│   ├── test-all.sh
│   └── update-gh-pages.sh
└── update-repo.sh
How can I run the application in nodejs.
If you look at the page you linked, you are supposed to run npm start in the main directory after installing NPM dependencies with npm install.
EDIT: After checking their package.json, you can actually just run npm start. It will also run dependency installation.

Categories