I am trying to implement nativescript-dev-appium in an existing nativescript-angular project and am having a lot of trouble getting the plugin configured.
The simulator appears to be found but the run fails in the before all and after all hooks because it appears to not have a device instance.
walrus:demo-appium niirds$ npm run e2e -- --runType sim.iPhoneX --verbose
> # e2e /Users/niirds/mobi/demo-appium
> node ./node_modules/nativescript-dev-appium/check-dev-deps.js && tsc -p e2e && mocha --opts ./e2e/config/mocha.opts "--runType" "sim.iPhoneX" "--verbose"
/Users/niirds/mobi/demo-appium/e2e/config/appium.capabilities.json
Capabilities found at: /Users/niirds/mobi/demo-appium/e2e/config/appium.capabilities.json
Appium will use default automation name
Available applications: ["platforms/ios/build/emulator/demoappium.app"]
Pick first application: "platforms/ios/build/emulator/demoappium.app"
Application full path: /Users/niirds/mobi/demo-appium/platforms/ios/build/emulator/demoappium.app
Found devices: [ { token: 'C8B1990E-1593-49A8-AA68-C7E5CC2134BB',
name: 'iPhone X',
status: 'booted',
type: 'watch',
apiLevel: '12.2',
platform: 'ios',
config: { density: 3, offsetPixels: 87 } } ]
1) "before all" hook: start server
2) "after all" hook: stop server
0 passing (2s)
2 failing
1) "before all" hook: start server:
TypeError: Cannot read property 'type' of undefined
at DeviceManager.<anonymous> (node_modules/nativescript-dev-appium/lib/device-manager.js:82:28)
at Generator.next (<anonymous>)
at fulfilled (node_modules/nativescript-dev-appium/lib/device-manager.js:4:58)
at process._tickCallback (internal/process/next_tick.js:68:7)
2) "after all" hook: stop server:
TypeError: Cannot read property 'platform' of undefined
at Function.<anonymous> (node_modules/mobile-devices-controller/lib/device-controller.js:104:24)
at Generator.next (<anonymous>)
at /Users/niirds/mobi/demo-appium/node_modules/mobile-devices-controller/lib/device-controller.js:7:71
at new Promise (<anonymous>)
at __awaiter (node_modules/mobile-devices-controller/lib/device-controller.js:3:12)
at Function.uninstallApp (node_modules/mobile-devices-controller/lib/device-controller.js:103:16)
at Object.<anonymous> (node_modules/nativescript-dev-appium/index.js:85:64)
at Generator.next (<anonymous>)
at /Users/niirds/mobi/demo-appium/node_modules/nativescript-dev-appium/index.js:7:71
at new Promise (<anonymous>)
at __awaiter (node_modules/nativescript-dev-appium/index.js:3:12)
at Object.stopServer (node_modules/nativescript-dev-appium/index.js:77:12)
at Object.<anonymous> (e2e/setup.js:16:37)
at Generator.next (<anonymous>)
at /Users/niirds/mobi/demo-appium/e2e/setup.js:7:71
at new Promise (<anonymous>)
at __awaiter (e2e/setup.js:3:12)
at Context.after (e2e/setup.js:15:28)
at process.topLevelDomainCallback (domain.js:121:23)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # e2e: `node ./node_modules/nativescript-dev-appium/check-dev-deps.js && tsc -p e2e && mocha --opts ./e2e/config/mocha.opts "--runType" "sim.iPhoneX" "--verbose"`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Here is the simulator capability, provided by the installation:
"sim.iPhoneX": {
"platformName": "iOS",
"platformVersion": "/12*/",
"deviceName": "iPhone X",
"noReset": false,
"fullReset": false,
"app": ""
},
I have xcode 10.2 installed, and here is the package.json if that helps.
{
"nativescript": {
"id": "org.nativescript.demoappium",
"tns-android": {
"version": "5.3.0"
},
"tns-ios": {
"version": "5.3.0"
}
},
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"scripts": {
"lint": "tslint \"src/**/*.ts\"",
"e2e": "node ./node_modules/nativescript-dev-appium/check-dev-deps.js && tsc -p e2e && mocha --opts ./e2e/config/mocha.opts ",
"e2e-watch": "tsc -p e2e --watch"
},
"dependencies": {
"#angular/animations": "~7.2.0",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/http": "~7.2.0",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"nativescript-angular": "~7.2.0",
"nativescript-theme-core": "~1.0.4",
"reflect-metadata": "~0.1.12",
"rxjs": "~6.3.0",
"tns-core-modules": "~5.3.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular/compiler-cli": "~7.2.0",
"#nativescript/schematics": "~0.5.0",
"#ngtools/webpack": "~7.2.0",
"#types/chai": "~4.1.7",
"#types/mocha": "~5.2.5",
"#types/node": "~10.12.18",
"codelyzer": "~4.5.0",
"mocha": "~5.2.0",
"mocha-junit-reporter": "~1.18.0",
"mocha-multi": "~1.0.1",
"nativescript-dev-appium": "^5.1.0",
"nativescript-dev-sass": "~1.7.0",
"nativescript-dev-typescript": "~0.9.0",
"nativescript-dev-webpack": "~0.21.0",
"tslint": "~5.11.0"
},
"gitHead": "6ccaee804c71761be1c2f91d0b2dd67c8ba6d2b6",
"readme": "NativeScript Application"
}
Steps to reproduce:
1. create sample nativescript-angular app--i used the tab navigation one for this test.
2. install nativescript-dev-appium: npm i -D nativescript-dev-appium
3. install other dependencies https://docs.nativescript.org/angular/tooling/testing/end-to-end-testing/overview#environment-setup
4. build app: tns build <platform>
5. run test: `npm run e2e -- --runType
i have been trying to get this to work on iOS for now.
Any help will be greatly appreciated!
I think that for some reason the device type that device controller has returned type: 'watch' is not correct.
I suggest you change the config to something like:
"sim.iPhoneX": {
"platformName": "iOS",
"platformVersion": "12.2",
"deviceName": "iPhone X",
"noReset": false,
"fullReset": false,
"app": ""
},
or simply try it with the --ignoreDeviceController option.
Related
I have an Angular 1.6 project which did build using:
node 10.16.0
bower 1.8.14
gulp 3.9.1
and with the command sequence:
npm install
bower install
gulp
It now breaks at the bower install step with the file-saver.js#~1.20150507.2 throwing error:
Failed to execute "git ls-remote --tags --heads https://github.com/Teleborder/FileSaver.js.git", exit code of #128
Because of this, I have removed the line
"angular-file-saver": "^1.1.3"
from the bower.json file (bower uninstall did not work for that package) and installed the angular-file-saver package via
npm install angular-file-saver --save-dev
So now the package.json looks like this:
{
"name": "app",
"version": "1.0.0",
"description": "app",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"app"
],
"author": "me",
"license": "ISC",
"devDependencies": {
"angular-file-saver": "^1.1.3",
"del": "^2.2.2",
"eslint-config-angular": "^0.5.0",
"eslint-plugin-angular": "^1.5.0",
"gulp": "^3.9.1",
"gulp-angular-filesort": "^1.1.1",
"gulp-angular-templatecache": "^2.0.0",
"gulp-autoprefixer": "^3.1.1",
"gulp-cheerio": "^0.6.2",
"gulp-clean-css": "^2.2.2",
"gulp-concat": "^2.6.1",
"gulp-eslint": "^3.0.1",
"gulp-filter": "^4.0.0",
"gulp-flatten": "^0.3.1",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-inject": "^4.1.0",
"gulp-ng-annotate": "^2.0.0",
"gulp-rev": "^7.1.2",
"gulp-sass": "^3.0.0",
"gulp-sourcemaps": "^1.9.1",
"gulp-string-replace": "^0.3.1",
"gulp-uglify": "^2.0.0",
"main-bower-files": "^2.13.1",
"natives": "^1.1.6",
"require-dir": "^0.3.1",
"rimraf": "^2.6.2",
"stream-series": "^0.1.1",
"uglify-save-license": "^0.4.1",
"yargs": "^6.5.0"
},
"dependencies": {
"bower": "^1.8.4"
}
}
My src\app.js contains this:
(function(angular) {
'use strict';
angular
.module('app', [
'angular-cache',
'ui.router',
'ui.router.modal',
'ui.bootstrap',
'ui.bootstrap-slider',
'ui.validate',
'angular-confirm',
'ngAnimate',
'ngFileSaver',
'angularMoment',
'pascalprecht.translate',
'tmh.dynamicLocale']);
}(window.angular));
And my controller contains this:
angular
.module('app')
.component('readings', {
controllerAs: 'vm',
templateUrl: 'readings/readings.html',
controller: ReadingsController
});
function ReadingsController(..., FileSaver, ...) {
So, now this command sequence works:
npm install
bower install
gulp
But I get this error in the browser
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ngFileSaver due to:
Error: [$injector:nomod] Module 'ngFileSaver' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.6.0/$injector/nomod?p0=ngFileSaver
How can I get this package working via npm instead of bower?
I have never used docker before. When I run it in my local it will be working fine but when I run using docker getting an error. I have created a docker file that contains the below line of code.
FROM cypress/base:14.19.0
RUN mkdir /legrande-cypress
WORKDIR /legrande-cypress
COPY ./package.json .
COPY ./cypress.json .
COPY ./cypress ./cypress
RUN npm install
ENTRYPOINT ["npx","cypress","run"]
This is my package.json file.
{
"name": "cypressautomation",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"delete:reportFolder": "rm -rf mochawesome-report/",
"test:cli": "npm run delete:reportFolder && cypress run",
"merge:reports": "mochawesome-merge mochawesome-report/*.json > cypress-combined-report.json",
"create:html:report": "npm run merge:reports && marge --reportDir TestReport cypress-combined-report.json",
"cy:run": "cypress run",
"record-test": "cypress run --record --key ############################"
},
"reporter": "cypress-mochawesome-reporter",
"reporterOptions": {
"reportDir": "cypress/Reports",
"charts": true,
"reportPageTitle": "My Test Suite",
"embeddedScreenshots": true,
"inlineAssets": true
},
"video": false,
"author": "weblylab",
"license": "ISC",
"devDependencies": {
"cypress": "^9.5.0",
"cypress-file-upload": "^5.0.2",
"cypress-mochawesome-reporter": "^2.2.0",
"cypress-slack-reporter": "^1.2.1",
"cypress-xpath": "^1.6.1",
"faker": "^5.5.3",
"i": "^0.3.6",
"mocha": "^8.4.0",
"mochawesome": "^6.2.2",
"mochawesome-merge": "^4.2.0",
"mochawesome-report-generator": "^5.2.0",
"tsconfig-paths": "^3.9.0"
},
"dependencies": {
"#auth0/auth0-spa-js": "^1.13.6",
"#types/bluebird": "^3.5.33",
"#types/lodash": "^4.14.168",
"chai": "^4.3.0",
"cypress-iframe": "^1.0.1",
"cypress-skip-test": "^1.0.0",
"delay": "^5.0.0",
"Faker": "^0.7.2",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"resolve-url": "^0.2.1",
"save": "^2.4.0",
"source-map-resolve": "^0.6.0",
"urix": "^0.1.0",
"xlsx": "^0.17.0"
}
}
When I run cypress test using docker run -i -v "%cd%":/legrande-cypress -t cypress-image:latest --spec cypress/integration/examples/*.js it will throwes an error below.
Your pluginsFile threw an error from: /legrande-cypress/cypress/plugins/index.js
Error: Cannot find module 'cypress-mochawesome-reporter/plugin'
Require stack:
- /legrande-cypress/cypress/plugins/index.js
- /root/.cache/Cypress/9.5.1/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js
- /root/.cache/Cypress/9.5.1/Cypress/resources/app/packages/server/lib/plugins/child/index.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:101:18)
at module.exports (/legrande-cypress/cypress/plugins/index.js:22:3)
at /root/.cache/Cypress/9.5.1/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js:94:12
at tryCatcher (/root/.cache/Cypress/9.5.1/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/util.js:16:23)
at Function.Promise.attempt.Promise.try (/root/.cache/Cypress/9.5.1/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/method.js:39:29)
at load (/root/.cache/Cypress/9.5.1/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js:91:7)
at EventEmitter.<anonymous> (/root/.cache/Cypress/9.5.1/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js:209:5)
at EventEmitter.emit (events.js:400:28)
at process.<anonymous> (/root/.cache/Cypress/9.5.1/Cypress/resources/app/packages/server/lib/plugins/util.js:19:22)
at process.emit (events.js:400:28)
at emit (internal/child_process.js:912:12)
at processTicksAndRejections (internal/process/task_queues.js:83:21)
How to resolve this error please let me know if anyone has any idea.
I'm using this package to compile and build my extension
{
"id": "extensionAzureDevOps",
"name": "extension",
"publisher": "ME",
"version": "0.0.63",
"description": "Azure DevOps Extension",
"keywords": [
"extensions",
"Azure DevOps",
"Visual Studio Team Services"
],
"engines": {
"vscode": "^1.8.0"
},
"license": "MIT",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"clean": "rimraf ./dist",
"compile": "npm run clean && npm run test && webpack --mode production",
"compile:dev": "npm run clean && npm run test && webpack --mode development",
"build": "npm run compile",
"build:dev": "npm run compile:dev && npm run postbuild",
"postbuild": "npm run package-extension -- --rev-version",
"package-extension": "tfx extension create --manifest-globs azure-devops-extension.json src/TabExtension/*.json",
"publish-extension": "tfx extension publish --manifest-globs azure-devops-extension.json src/TabExtension/*.json",
"test": "set TEST_REPORT_FILENAME=test-results.xml && jest --verbose"
},
"dependencies": {
"#fluentui/react": "^8.36.3",
"azure-devops-extension-api": "~1.157.0",
"azure-devops-extension-sdk": "~2.0.11",
"azure-devops-ui": "~2.164.0",
"react": "~16.13.1",
"react-dom": "~16.13.1"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.11.0",
"#testing-library/react": "^10.4.4",
"#types/jest": "^26.0.3",
"#types/react": "~16.8.2",
"#types/react-dom": "~16.8.0",
"copy-webpack-plugin": "^7.0.0",
"base64-inline-loader": "~1.1.1",
"css-loader": "~1.0.0",
"jest": "^26.1.0",
"jest-junit-reporter": "^1.1.0",
"node-sass": "^5.0.0",
"rimraf": "~2.6.2",
"sass-loader": "~10.0.5",
"style-loader": "~0.23.1",
"tfx-cli": "^0.6.3",
"ts-jest": "^26.1.1",
"ts-loader": "~5.2.2",
"typescript": "^3.9.6",
"webpack": "^5.23.0",
"webpack-cli": "^4.5.0"
},
"jest": {
"transform": {
"^.+\\.(js|ts|tsx|jsx)$": "ts-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!(react-native|azure-devops-ui|azure-devops-extension-sdk)/)"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
"\\.(css|less|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
},
"preset": "ts-jest/presets/js-with-babel",
"testResultsProcessor": "./node_modules/jest-junit-reporter",
"collectCoverage": true,
"coverageReporters": [
"json",
"html",
"cobertura"
],
"globals": {
"ts-jest": {
"tsconfig": "tsconfig.test.json"
}
}
}
}
When I run the command npm run postbuild, I receive this error:
tfx extension create --manifest-globs azure-devops-extension.json src/TabExtension/*.json "--rev-version"
tfx extension create --manifest-globs azure-devops-extension.json src/TabExtension/*.json "--rev-version"
(node:89172) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
TFS Cross Platform Command Line Interface v0.6.4
Copyright Microsoft Corporation
error: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Inplace
npm ERR! code ELIFECYCLE
npm ERR! errno 4294967295
npm ERR! feedback-extension-for-azuredevops#0.0.63 package-extension: `tfx extension create --manifest-globs azure-devops-extension.json src/TabExtension/*.json "--rev-version"`
npm ERR! Exit status 4294967295
npm ERR!
npm ERR! Failed at the feedback-extension-for-azuredevops#0.0.63 package-extension script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\t-nashak\AppData\Roaming\npm-cache\_logs\2021-12-08T15_15_13_712Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 4294967295
npm ERR! feedback-extension-for-azuredevops#0.0.63 postbuild: `npm run package-extension -- --rev-version`
npm ERR! Exit status 4294967295
npm ERR!
But when I run the command tfx extension create --manifest-globs azure-devops-extension.json src/TabExtension/*.json --rev-version it works well
what causes the dependencies cycle? how can I fix it?
note: if I remove the param --rev-version it will work well
I had the same issue. I guess the postbuild command is wrong:
"postbuild": "npm run package-extension -- --rev-version"
This works:
"postbuild": "npm run package-extension --rev-version"
Today I create a fresh Rails webpacker app with command:
$ rails new my-app --webpacker=react -d mysql
The fresh app generated smoothly until I tried to run:
$ ./bin/webpack-dev-server
The webpack-cli return a message:
The command moved into a separate package: #webpack-cli/serve
Would you like to install serve? (That will run yarn add -D #webpack-cli/serve) (yes/NO) :
I tried to select yes but the installation of webpack-cli is not success with message:
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ #webpack-cli/serve#1.5.2
info All dependencies
└─ #webpack-cli/serve#1.5.2
Done in 2.11s.
TypeError: Class constructor ServeCommand cannot be invoked without 'new'
at runWhenInstalled (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
at /home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:124:15
at processTicksAndRejections (internal/process/task_queues.js:95:5)
and when I run ./bin/webpack-dev-server command I get error messages:
/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:46
return func(...args);
^
TypeError: Class constructor ServeCommand cannot be invoked without 'new'
at runWhenInstalled (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
at promptForInstallation (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:140:10)
at /home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/cli.js:32:43
at Object.<anonymous> (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
Here is my package.json:
{
"name": "my-app",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.14.5",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"turbolinks": "^5.2.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^4.0.0"
}
}
and my node.js version
$ node -v
v14.17.5
For now, temporarily I solve it by using the previous version:
"devDependencies": {
"webpack-dev-server": "^3.11.2"
}
Update:
The webpack-cli & webpack-dev-server at devDependencies of fresh package.json generated by using rails new my-app --webpacker=react are:
"dependencies": {
...
"webpack-cli": "^3.3.12"
...
},
"devDependencies": {
"webpack-dev-server": "^4.0.0"
}
If we see from here, we found that webpack-dev-server v.4.0.0 depends on "webpack-cli": "^4.7.2" which is incompatible with fresh rails webpacker package configurations that use "webpack-cli": "^3.3.12" as dependency.
Usually we can check webpack-cli info by using command npx webpack-cli info. But now when I try, I got an error and found a warning:
$ npx webpack-cli info
...
warning " > #webpack-cli/info#1.3.0" has incorrect peer dependency "webpack-cli#4.x.x".
...
TypeError: Class constructor InfoCommand cannot be invoked without 'new'
at runWhenInstalled (/home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
at /home/yohanes/Projects/my-app/node_modules/webpack-cli/bin/utils/prompt-command.js:124:15
at processTicksAndRejections (internal/process/task_queues.js:95:5)
...
For now, the only configurations that work with my environment only:
"dependencies": {
...
"webpack-cli": "^3.3.12"
...
},
"devDependencies": {
"webpack-dev-server": "^3.11.2"
}
Update:
Please see DHH comment here
Case close.
I've been working on setting an existing Ionic 2 project on a Apple Mac machine.
I've duplicated my project as it is described here.
After solving some Xcode issues, finally the app opens on an iPhone iOS physical device but shows a blank screen after the splash screen.
I found how to get some log displayed here. The log input lead me to that SO thread: "cannot find module ionic-native".
I concluded that I had to update my project code to match the new settings to handle ionic-native plugins.
For each plugin I applied the following process: ionic plugin rm [plugin name], ionic plugin add [plugin name], npm install --save #ionic-native/[plugin name].
I reviewed my code to change where needed, in some components and providers from:
{ NativePlugin1, NativePlugin2 } from 'ionic-native';
To:
{ NativePlugin1 } from '#ionic-native/native-plugin-1';
{ NativePlugin2 } from '#ionic-native/native-plugin-2';
I modified my [ionic project folder]/src/app/app.module.ts and added:
// all declaration as it was like "import { NgModule } from '#angular/core';"
//plus declarations added to match new rules and add plugin in providers section
{ NativePlugin1 } from '#ionic-native/native-plugin-1';
{ NativePlugin2 } from '#ionic-native/native-plugin-2';
#NgModule({
declarations: [
...
],
imports: [...
],
bootstrap: [IonicApp],
entryComponents: [...
],
providers: [
NativePlugin1,
NativePlugin2,
...
]
})
export class AppModule {}
I deleted from my package.json the line "ionic-native": "^2.7.0", as it is suggested in the solution of the SO thread I am referencing to:
You need to remove "ionic-native": "^3.5.0" from your package.json and after that run npm i.
Then I launched in that order: sudo npm cache clear, sudo npm install, and finally ionic build ios, for which I get:
"Error: Failed to transpile program"
And above this error I see plenty of errors related to the ionic-native like this one:
[14:22:15] typescript: src/services/custom-http/custom-http.ts, line:XX
Property 'type' does not exist on type 'typeof Network'.
LXX: return Network.type;
I feel stuck now so if anyone has a hint it would be welcome.
To complete here are some additional info:
ionic info gives:
Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 7.3.1 Build version 7D1014
And my package.json is like this:
{
"name": "my project",
"author": "my name",
"homepage": "",
"private": true,
"scripts": {
"build": "ionic-app-scripts build",
"watch": "ionic-app-scripts watch",
"serve:before": "watch",
"emulate:before": "build",
"deploy:before": "build",
"build:before": "build",
"run:before": "build"
},
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/compiler-cli": "0.6.2",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/platform-server": "2.0.0",
"#ionic-native/core": "^3.5.0",
"#ionic-native/device": "^3.5.0",
"#ionic-native/insomnia": "^3.5.0",
"#ionic-native/keyboard": "^3.5.0",
"#ionic-native/network": "^3.5.0",
"#ionic-native/screen-orientation": "^3.5.0",
"#ionic-native/splash-screen": "^3.5.0",
"#ionic-native/sqlite": "^3.5.0",
"#ionic-native/status-bar": "^3.5.0",
"#ionic-native/vibration": "^3.5.0",
"#ionic/storage": "1.0.3",
"ionic-angular": "2.0.0-rc.0",
"ionicons": "3.0.0",
"ng2-translate": "^3.2.1",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.21"
},
"devDependencies": {
"#ionic/app-scripts": "latest",
"typescript": "2.0.3"
},
"description": "MyProject: An Ionic project",
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": []
}
Some update after #suraj input:
I ve updated my package.json such as:
{
"name": "MyIonicProject",
"author": "author name",
"homepage": "",
"private": true,
"scripts": {
"build": "ionic-app-scripts build",
"watch": "ionic-app-scripts watch",
"serve:before": "watch",
"emulate:before": "build",
"deploy:before": "build",
"build:before": "build",
"run:before": "build"
},
"dependencies": {
"#angular/common": "4.0.0",
"#angular/compiler": "4.0.0",
"#angular/compiler-cli": "4.0.0",
"#angular/core": "4.0.0",
"#angular/forms": "4.0.0",
"#angular/http": "4.0.0",
"#angular/platform-browser": "4.0.0",
"#angular/platform-browser-dynamic": "4.0.0",
"#angular/platform-server": "4.0.0",
"#ionic-native/core": "^3.5.0",
"#ionic-native/device": "^3.5.0",
"#ionic-native/insomnia": "^3.5.0",
"#ionic-native/keyboard": "^3.5.0",
"#ionic-native/network": "^3.5.0",
"#ionic-native/screen-orientation": "^3.5.0",
"#ionic-native/splash-screen": "^3.5.0",
"#ionic-native/sqlite": "^3.5.0",
"#ionic-native/status-bar": "^3.5.0",
"#ionic-native/vibration": "^3.5.0",
"#ionic/storage": "2.0.1",
"ionic-angular": "3.0.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.4",
"ng2-translate": "^3.2.1"
},
"devDependencies": {
"#ionic/app-scripts": "latest",
"typescript": "~2.2.1"
},
"description": "LpjcaIonic: An Ionic project",
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": []
}
I followed the change log update for ionic 3.
I deleted the node_modules directory of my project launching:sudo rm -rf node_modules/ then did an nom install , ionic platform rm ios,ionic platform add ios, and finally ionic build ios.
I looked in the log, here is their content:
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm#4.5.0
3 info using node#v6.9.1
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [MyIonicProject]#~prebuild: [MyIonicProject]#
6 silly lifecycle [MyIonicProject]#~prebuild: no script for prebuild, continuing
7 info lifecycle [MyIonicProject]#~build: [MyIonicProject]#
8 verbose lifecycle [MyIonicProject]#~build: unsafe-perm in lifecycle true
9 verbose lifecycle [MyIonicProject]#~build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/my_mac/Documents/[MyIonicProject]/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/Users/my_mac/Library/Android/sdk:/Users/my_mac/Library/Android/sdk/tools:/Users/my_mac/Library/Android/sdk/platform-tools
10 verbose lifecycle [MyIonicProject]#~build: CWD: /Users/my_mac/Documents/[MyIonicProject]
11 silly lifecycle [MyIonicProject]#~build: Args: [ '-c', 'ionic-app-scripts build' ]
12 silly lifecycle [MyIonicProject]#~build: Returned: code: 1 signal: null
13 info lifecycle [MyIonicProject]#~build: Failed to exec build script
14 verbose stack Error: [MyIonicProject]# build: `ionic-app-scripts build`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:877:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid LpjcaIonic#
16 verbose cwd /Users/my_mac/Documents/[MyIonicProject]
17 verbose Darwin 16.5.0
18 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
19 verbose node v6.9.1
20 verbose npm v4.5.0
21 error code ELIFECYCLE
22 error errno 1
23 error LpjcaIonic# build: `ionic-app-scripts build`
23 error Exit status 1
24 error Failed at the [MyIonicProject]# build script 'ionic-app-scripts build'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the [MyIonicProject] package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error ionic-app-scripts build
24 error You can get information on how to open an issue for this project with:
24 error npm bugs [MyIonicProject]
24 error Or if that isn't available, you can get their info via:
24 error npm owner ls [MyIonicProject]
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]
Additional input to #suraj, the class CustomHttpService, it is a service located in [project]/services/custom-http/custom-http.ts and injected in the Providers section of app.module.ts:
import { Injectable } from '#angular/core';
import { Http, Headers, Response, RequestOptions, RequestMethod, Request } from '#angular/http';
import { Observable } from 'rxjs/Observable';
// import { Network } from 'ionic-native';
import { Network } from '#ionic-native/network';
#Injectable()
export class CustomHttpService {
//other code
public connection = () => {
return Network.type;
}
public onDisconnect = ():Observable<any> => {
return Network.onDisconnect();
}
public onConnect = ():Observable<any> => {
return Network.onConnect();
}
}
you have updated ionic-native to 3.x.. however your core ionic-angular is still in 2.0.0-rc0 and also all other dependencies are older.
Typescript used currently is changed to 2.2.
You will need to update your package.json to the current starter app version if you plan to move to ionic native 3.
Also check the changelog for any breaking changes in ionic for your code.
Also you need set each of the ionic native plugins as providers and inject in your constructor and use.
Check the docs.
In your app.module.ts,
#NgModule({
...
providers: [
...
Network
...
]
...
})
export class AppModule { }
In your custom.http.ts
constructor(public http:Http,public network:Network
){
console.log("CustomHttpService() starts");
}
//..other code
public connection = () => {
return this.network.type;
}
Ran into the same error and after filtering through the code there was a syntax error with a missing comma. Try looking in your app.module.ts file. Hope it helps.