Error running npm install on ionic2 - ionic2

Tried to build my very first app.
Tried installing a plugin and faced this error issue:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.0.0
(node_modules\chokidar\node_modules\fsevents): npm WARN notsup
SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.1.1:
wanted {"os":"darwin","arch":"any"} (current:
{"os":"win32","arch":"x64"}) npm WARN #ionic-native/geolocation#3.6.1
requires a peer of #ionic-native/core#^3.6.0 but none was installed.
npm WARN #ionic-native/geolocation#3.6.1 requires a peer of
rxjs#^5.0.1 but none was installed. npm WARN
#ionic-native/in-app-browser#3.6.1 requires a peer of
#ionic-native/core#^3.6.0 but none was installed. npm WARN
#ionic-native/in-app-browser#3.6.1 requires a peer of rxjs#^5.0.1 but
none was installed.
Wondering if anyone can help

Go to your package.json and ensure the following itens have these values
"dependencies": {
"#angular/common": "4.0.2",
"#angular/compiler": "4.0.2",
"#angular/compiler-cli": "4.0.2",
"#angular/core": "4.0.2",
"#angular/forms": "4.0.2",
"#angular/http": "4.0.2",
"#angular/platform-browser": "4.0.2",
"#angular/platform-browser-dynamic": "4.0.2",
"#ionic-native/core": "^3.6.1",
"#ionic-native/splash-screen": "3.4.2",
"#ionic-native/status-bar": "3.4.2",
"#ionic/storage": "2.0.1",
"ionic-angular": "3.1.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.5"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.4",
"typescript": "~2.2.1"
}
This is the needed to use the latest Ionic version, probably your #ionic-native/core and rxjs are not in this version, as the erros says it needs a higher version than the one you have.
Change your package.json, delete the node_modules folder of your project and then run npm install in it.
Hope this helps

this is my 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-native/geolocation": "^3.6.1",
"#ionic-native/in-app-browser": "^3.6.1",
"#ionic/storage": "1.1.7",
"ionic-angular": "2.0.0-rc.5",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"ng-material-floating-button": "^0.6.2",
"rxjs": "5.0.0-beta.12",
"sw-toolbox": "3.4.0",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "1.0.0",
"typescript": "2.0.9"
},
"description": "ion_city_view: An Ionic project",
"cordovaPlugins": [],
"cordovaPlatforms": []
}

Related

Storybook - Ember.js - Getting stuck on loading state

I've installed storybook/ember on an existing Ember project, but unfortunatelly it stuck on loading screen with no error - doesn't display the welcome page and shows the spinner instead.
.storybook/main.js
module.exports = {
"stories": [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials"
]
}
I haven't touched anything in the stories or .storybook (everythins is the default).
package.json
{
"name": "web-ui",
"version": "0.0.0",
"description": "Small description for web-ui goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"private": true,
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test -r xunit",
"coverage": "COVERAGE=true ./node_modules/.bin/ember test --silent",
"storybook": "start-storybook -p 6006 -s dist",
"build-storybook": "build-storybook -s dist"
},
"engines": {
"node": ">= 10.*"
},
"devDependencies": {
"#babel/core": "7.11.6",
"#ember/jquery": "1.1.0",
"#ember/optional-features": "2.0.0",
"#glimmer/component": "1.0.1",
"#storybook/addon-actions": "^6.0.22",
"#storybook/addon-essentials": "^6.0.22",
"#storybook/addon-links": "^6.0.22",
"#storybook/ember": "^6.0.22",
"acorn": "^8.0.1",
"babel-eslint": "10.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-ember-modules-api-polyfill": "^3.1.1",
"babel-plugin-htmlbars-inline-precompile": "^4.2.0",
"bootstrap": "3.4.1",
"broccoli-asset-rev": "3.0.0",
"broccoli-funnel": "3.0.3",
"broccoli-merge-trees": "4.2.0",
"browser": "0.2.6",
"d3": "6.1.1",
"ember-ajax": "5.0.0",
"ember-auto-import": "1.6.0",
"ember-can": "3.0.0",
"ember-cli": "3.16.0",
"ember-cli-app-version": "3.2.0",
"ember-cli-babel": "7.22.1",
"ember-cli-code-coverage": "1.0.0",
"ember-cli-content-security-policy": "1.1.1",
"ember-cli-dependency-checker": "3.2.0",
"ember-cli-document-title-northm": "1.0.3",
"ember-cli-htmlbars": "5.3.1",
"ember-cli-inject-live-reload": "2.0.2",
"ember-cli-json-module": "1.0.0",
"ember-cli-jstree": "1.0.12",
"ember-cli-less": "3.0.1",
"ember-cli-mirage": "1.1.8",
"ember-cli-nouislider": "1.2.1",
"ember-cli-pagination": "3.1.5",
"ember-cli-sri": "2.1.1",
"ember-cli-template-lint": "1.0.0-beta.3",
"ember-cli-test-loader": "3.0.0",
"ember-cli-uglify": "3.0.0",
"ember-data": "3.16.0",
"ember-diff-attrs": "0.2.2",
"ember-disable-proxy-controllers": "1.0.2",
"ember-export-application-global": "2.0.1",
"ember-flatpickr": "2.16.2",
"ember-infinity": "2.1.2",
"ember-inflector": "3.0.1",
"ember-inline-svg": "1.0.0",
"ember-intl": "5.4.2",
"ember-load-initializers": "2.1.1",
"ember-math-helpers": "2.15.0",
"ember-maybe-import-regenerator": "0.1.6",
"ember-power-select": "3.0.4",
"ember-qunit": "4.6.0",
"ember-radio-button": "2.0.1",
"ember-resolver": "7.0.0",
"ember-simple-auth": "2.1.1",
"ember-source": "3.16.0",
"ember-storage": "2.0.0",
"ember-table": "2.2.3",
"ember-template-lint": "1.13.2",
"ember-tooltips": "3.4.5",
"ember-truth-helpers": "2.1.0",
"ember-vega": "1.1.5",
"emberx-select": "3.1.1",
"eslint": "5.16.0",
"eslint-plugin-ember": "7.7.2",
"eslint-plugin-node": "11.1.0",
"jquery-mockjax": "2.6.0",
"jshint": "2.12.0",
"json-merger": "1.1.2",
"loader.js": "4.7.0",
"material-design-icons-iconfont": "4.0.5",
"minimatch": "3.0.4",
"node-gyp": "6.0.0",
"qunit-dom": "1.5.0",
"react-is": "^16.13.1",
"request": "2.88.2",
"rsvp": "4.8.5",
"valid-url": "1.0.9",
"vega-lib": "4.4.0",
"yaml-lint": "1.2.4"
},
"dependencies": {
"#ember/test-helpers": "^1.7.2",
"#storybook/core": "^6.0.22",
"core-js": "^3.6.5",
"faker": "^4.1.0",
"global": "^4.4.0",
"regenerator-runtime": "^0.13.7",
"semver": "^6.3.0",
"ts-dedent": "^2.0.0"
}
}
Any help/suggestions are appreciated.
You need to make sure to run ember install #storybook/ember-cli-storybook after running npx sb init, this will make sure that the ember adapter is installed.
Once you've made thoses steps, make sure to first run your ember app (ie ember s nor ember build) then once the app is built, you can run storybook as you've done.
This is due to a limitation because today the install steps are a bit broken and need to be fixed, that's why we need to run thoses extra steps!
Let me know if you got any questions :)

Ionic unit testing: webpack version

I've been trying to set up a testing example according to the common guidelines: Testing in Ionic, Ionic GitHub Example
My project's package.json:
{
"name": "starter-with-testing",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"test": "karma start ./test-config/karma.conf.js"
},
"dependencies": {
"#angular/animations": "5.2.11",
"#angular/common": "5.2.11",
"#angular/compiler": "5.2.11",
"#angular/compiler-cli": "5.2.11",
"#angular/core": "5.2.11",
"#angular/forms": "5.2.11",
"#angular/http": "5.2.11",
"#angular/platform-browser": "5.2.11",
"#angular/platform-browser-dynamic": "5.2.11",
"#ionic-native/core": "4.7.0",
"#ionic-native/splash-screen": "4.7.0",
"#ionic-native/status-bar": "4.7.0",
"#ionic/storage": "2.1.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"#ionic/app-scripts": "^3.1.10",
"#types/jasmine": "^2.8.8",
"#types/node": "^10.3.4",
"angular2-template-loader": "^0.6.2",
"html-loader": "^0.5.5",
"istanbul-instrumenter-loader": "^3.0.1",
"jasmine": "^3.1.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^2.0.3",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.1",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^3.0.0",
"null-loader": "^0.1.1",
"protractor": "^5.3.2",
"ts-loader": "^4.4.1",
"ts-node": "^6.1.2",
"typescript": "~2.6.2"
},
"description": "An Ionic project"
}
Attempt at $ npm test results in an error:
Chrome 67.0.3396 (Linux 0.0.0) ERROR
{
"message": "An error was thrown in afterAll\nUncaught Error: Module build failed: Error: You may be using an old version of webpack; please check you're using at least version 4\n at successfulTypeScriptInstance (/home/alexey/spaces/cordova/starter-with-testing/node_modules/ts-loader/dist/instances.js:168:15)\n at Object.getTypeScriptInstance (/home/alexey/spaces/cordova/starter-with-testing/node_modules/ts-loader/dist/instances.js:51:12)\n at Object.loader (/home/alexey/spaces/cordova/starter-with-testing/node_modules/ts-loader/dist/index.js:16:41)"
That is, webpack 4.x required. Indeed,
$ npm list webpack
starter-with-testing#0.0.1 /home/alexey/spaces/cordova/starter-with-
testing
└─┬ #ionic/app-scripts#3.1.10
└── webpack#3.8.1
What am I supposed to do?
UPD:
I've got It looks like your post is mostly code; please add some more details. fatal error. Your question couldn't be submitted.
I'm really at a loss about more details. There is a dependency hell; please, help. I'll humbly submit whatever additional details you ask.
I had the same problem, and fixed it by downgrading my ts-loader and ts-node to the versions used in the ionic-unit-testing-example repository.
I.e. in package.json:
{
//...
"devDependencies": {
//...
"ts-loader": "^3.0.3",
"ts-node": "^3.0.2",
//...
}
//...
}
It's ts-loader that's complaining, so I'm not sure if the ts-node downgrade is actually required.
I solved the same error by simply give npm i webpack#latest.
I didn't have any custom configuration made so it seems to work now. I just found it takes really long time to compile but I haven't looked at it.

IONIC2 Apollo Graphql Eror: Cannot find name 'AsyncIterator'

im starting develop ionic app using graphql service but im got some problem in nodes modules, how can i solve this?
[14:32:44] typescript: D:/ionic/node_modules/#types/graphql/subscription/subscribe.d.ts, line: 17
Cannot find name 'AsyncIterator'.
L16: subscribeFieldResolver?: GraphQLFieldResolver<any, any>
L17: ): AsyncIterator<ExecutionResult>;
[14:32:44] typescript: D:/ionic/node_modules/#types/graphql/subscription/subscribe.d.ts, line: 29
Cannot find name 'AsyncIterable'.
L28: fieldResolver?: GraphQLFieldResolver<any, any>
L29: ): AsyncIterable<any>;
this my package.json
{
"name": "Test",
"author": "test,
"homepage": "http://test.com",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "2.4.8",
"#angular/compiler": "2.4.8",
"#angular/compiler-cli": "2.4.8",
"#angular/core": "2.4.8",
"#angular/forms": "2.4.8",
"#angular/http": "2.4.8",
"#angular/platform-browser": "2.4.8",
"#angular/platform-browser-dynamic": "2.4.8",
"#angular/platform-server": "2.4.8",
"#ionic/storage": "^1.1.9",
"angular2-jwt": "^0.1.28",
"apollo-angular": "^0.13.0",
"apollo-client": "^1.9.1",
"graphql-tag": "^2.4.2",
"ionic-angular": "^2.1.0",
"ionic-native": "2.5.1",
"ionicons": "3.0.0",
"rxjs": "5.2.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.7.7"
},
"devDependencies": {
"#ionic/app-scripts": "^2.1.4",
"typescript": "^2.3.4"
},
"cordovaPlugins": [
"ionic-plugin-keyboard",
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"cordova-plugin-camera",
"cordova-plugin-app-version"
],
"cordovaPlatforms": [],
"description": "TEST"
}
From the error message it looks like you installed the type declarations for graphql-js. The npm link is here.
Type declaration link here.
Neither the type declarations nor the library seems to be present in the package.json.
If this is the library you intend to use,you need to install using --save option as below:
npm install --save graphql
And types with save-dev option to add to dev dependencies.
npm install --save-dev #types/graphql
add "esnext.asynciterable" lib to file tsconfig.json
"compilerOptions": {
"lib": [
. . .
"esnext.asynciterable"
. . .
],
. . .

Ionic2 code changes do not get reflected in the live app

I have setup a new Ionic2 project using the Ionic CLI. I used ionic serve command to browse the website. Whenever I make changes to the html templates, I can see the linting and building process kick off, but the html or typescript changes are not reflected in the browser. I have tried several things such as clearing browser cache, using Chrome Incognito, and even killing the ionic session, and re-issuing the ionic serve command. Only after several hours, I see the code changes reflected in the browser. This is extremely frustrating...Please suggest a workaround. I am on Windows 10, Node version 6.9.4, ionic version 2.2.1
Package.json is:
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"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",
"angularfire2": "^2.0.0-beta.7",
"firebase": "^3.6.9",
"ionic-angular": "2.0.1",
"ionic-native": "2.4.1",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"sw-toolbox": "3.4.0",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "^1.0.1",
"#types/request": "0.0.39",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-statusbar",
"cordova-plugin-console",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "webapp: An Ionic project"
}

Access ionic2 API lockSwipes() method

Ionic2 docs list for a specific component some API methods.
For the slider component there is meant to be a lockSwipes() method.
While some of the methods exist, when I call lockSwipes() my typescript compiler tells me it doesn't exist!
I am on the latest version of ionic2 as of 2017 Feb.
Someone said something about modifying the typescript definitions but I don't know if this is something I should/could do myself.
Below is my packages.json
{
"name": "myApp",
"author": "Company!",
"homepage": "http://www.website.com",
"private": true,
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"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",
"ionic-angular": "2.0.0",
"ionic-native": "2.2.3",
"ionicons": "3.0.0",
"moment": "^2.17.1",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "0.0.45",
"typescript": "2.0.6"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-device",
"cordova-plugin-statusbar",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "WCGoalsIonic: An Ionic project"
}