I have a huge need to build a monorepo for my organization's Ionic assets. We produce a suite of applications, and like to share as much as possible in order to reduce our time-to-market. I found ng-packagr a week ago and think it's much better than the previous methods I've been using.
In any case, I'm developing a proof-of-concept, and can't get the ionic-angular library compiling. ngc breaks, and I'm not sure how to go about fixing it.
First, let me share my package.json and see if I'm on the right track here:
{
"name": "ionic-packagr-test",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": false,
"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",
"packagr": "ng-packagr -p ng-package.json"
},
"dependencies": {
"#angular/animations": "5.2.11",
"#angular/common": "5.2.11",
"#angular/compiler": "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.9.1",
"#ionic-native/splash-screen": "4.9.1",
"#ionic-native/status-bar": "4.9.1",
"#ionic/storage": "^2.1.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "^5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.6.8",
"#angular/cli": "^6.0.8",
"#angular/compiler-cli": "^5.2.11",
"#angular/language-service": "^6.0.7",
"#ionic/app-scripts": "3.1.10",
"#types/node": "^10.5.2",
"ng-packagr": "^3.0.3",
"ts-node": "^7.0.0",
"tslint": "^5.10.0",
"typescript": "~2.6.2"
},
"description": "An Ionic project"
}
I have a pretty vanilla component I'm trying to build, just using a shell Ionic blank template and exporting app.module.ts in my public_api.ts file.
When I run the packager, I get the following error:
BUILD ERROR
node_modules/ionic-angular/components/picker/picker-component.d.ts.PickerCmp.html(13,71): : Expected 0 arguments, but got 1.
node_modules/ionic-angular/components/input/input.d.ts.TextInput.html(1,928): : Expected 0 arguments, but got 1.
node_modules/ionic-angular/components/input/input.d.ts.TextInput.html(1,961): : Expected 0 arguments, but got 1.
Error: node_modules/ionic-angular/components/picker/picker-component.d.ts.PickerCmp.html(13,71): : Expected 0 arguments, but got 1.
node_modules/ionic-angular/components/input/input.d.ts.TextInput.html(1,928): : Expected 0 arguments, but got 1.
node_modules/ionic-angular/components/input/input.d.ts.TextInput.html(1,961): : Expected 0 arguments, but got 1.
Could it be possible that I'm using the wrong version of ng-packagr?
Thanks in advance.
Found a tutorial after days of looking. Will not copy/paste the article -- don't want to plagiarize or suppress traffic from his site.
Essentially, all dependencies should become devDependencies. If your package uses any devDependencies copy them as peerDependencies.
Related
I was trying to install paypal & onesignal plugin from official website with the help of official documentations and I got this error:
+-- UNMET PEER DEPENDENCY #ionic-native/core#4.3.2
`-- #ionic-native/paypal#5.30.0
Here is my Package.json
{
"name": "ionic-hello-world",
"version": "0.0.0",
"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"
},
"dependencies": {
"#angular/common": "5.0.0",
"#angular/compiler": "5.0.0",
"#angular/compiler-cli": "5.0.0",
"#angular/core": "5.0.0",
"#angular/forms": "5.0.0",
"#angular/http": "5.0.0",
"#angular/platform-browser": "5.0.0",
"#angular/platform-browser-dynamic": "5.0.0",
"#ionic-native/core": "4.3.2",
"#ionic-native/onesignal": "^5.30.0",
"#ionic-native/paypal": "^5.30.0",
"#ionic-native/splash-screen": "4.3.2",
"#ionic-native/status-bar": "4.3.2",
"#ionic/storage": "2.1.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"woocommerce-api": "^1.5.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "^3.2.4",
"typescript": "2.4.2"
},
"cordovaPlugins": [
"ionic-plugin-keyboard",
"cordova-plugin-whitelist",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-splashscreen"
],
"cordovaPlatforms": [],
"description": "ClickThrough: An Ionic project"
}
The PayPal service used by ionic-native/paypal has been deprecated for years and is end of life on December 7.
You should instead integrate the v2/checkout/orders API from a server, with or without the JS front end for the approval flow.
Approval requires a full mobile browser or SFSafariViewController/Chrome Custom Tabs. Approval cannot be given in a WKWebView or similar.
I'm using the plugin here: iOSFilePicker to access iCloud from my app to grab a file.
It works in debug on my machine, built through ionic command line with:
ionic cordova build ios --prod --release
However, when I actually archive the build in Xcode and release through the store beta channel for testing, the app crashes when I invoke the iOSFilePicker on an iOS 10.x device (iPhone 5).
Has anyone got an idea why?
Things to note:
working fine on iOS 11.x (iPhone 6 + 6s)
No errors, just a complete crash back to the home-screen iOS 10.x
I enabled capabilities for iCloud in Xcode, see screenshot below...
...despite the containers checkboxes not being ticked, it works when I run it on ios 11.x devices.
For reference, here's my package.json:
{
"name": "mycompany-web-ionic",
"version": "0.0.1",
"author": "MyCompany Ltd",
"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"
},
"dependencies": {
"#angular/animations": "5.2.9",
"#angular/common": "5.2.9",
"#angular/compiler": "5.2.9",
"#angular/compiler-cli": "5.2.9",
"#angular/core": "5.2.9",
"#angular/forms": "5.2.9",
"#angular/http": "5.2.9",
"#angular/platform-browser": "5.2.9",
"#angular/platform-browser-dynamic": "5.2.9",
"#ionic-native/app-version": "^4.7.0",
"#ionic-native/core": "4.7.0",
"#ionic-native/device": "4.7.0",
"#ionic-native/file": "4.7.0",
"#ionic-native/file-chooser": "4.7.0",
"#ionic-native/file-picker": "^4.7.0",
"#ionic-native/file-transfer": "4.7.0",
"#ionic-native/keyboard": "4.7.0",
"#ionic-native/network": "4.7.0",
"#ionic-native/splash-screen": "4.7.0",
"#ionic-native/status-bar": "4.7.0",
"#ionic/pro": "^1.0.20",
"#ionic/storage": "2.1.3",
"angular2-fusioncharts": "^1.0.2-rc.5",
"highcharts": "^6.1.0",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"moment": "^2.22.1",
"rxjs": "5.5.7",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.20"
},
"devDependencies": {
"#ionic/app-scripts": "^3.1.9",
"typescript": "~2.6.2"
},
"description": "An Ionic project"
}
---update 1---
It looks like a minimization issue for prod build.
I can reproduce the error by using ionic cordova build android --prod to create apk and adb install to push the apk to the android device.
The error message is:
main.js:1 ERROR Error: Uncaught (in promise): Error: No provider for t!
Error: No provider for t!
at Error (native)
at O (file:///android_asset/www/build/main.js:1:6087)
at T (file:///android_asset/www/build/main.js:1:6346)
at t._throwOrNull (file:///android_asset/www/build/main.js:3:5428)
at t._getByKeyDefault (file:///android_asset/www/build/main.js:3:5761)
at t._getByKey (file:///android_asset/www/build/main.js:3:5146)
at t.get (file:///android_asset/www/build/main.js:3:3554)
at e.get [as _Logger_81] (file:///android_asset/www/build/main.js:25:21486)
---main thread---
I have 3-line code behind a button. The code is attached at the end.
All 3-line functionality works as expected in ionic serve and ionic cordova run android in a real android device.
However, the 3rd line does not work if the code/apk is:
1. built by `ionic cordova build android --prod --release`,
2. published to google play store,
3. installed to the same android device.
It means that DubPage is not opened by clicking the button.
What I troubleshooted:
1. this.logger.log() does send data to logentries, i.e. `goToDub`
function is called succesfully.
2. this.player.pause() does stop the html5 video player
3. I have no idea how to debug `this.navCtrl.push()`.
4. The only possible cause I can come up with is the lazy loading of `DubPage`, even though I dont quite believe it being the reason.
Any hint?
goToDub() {
this.logger.log(JSON.stringify(this.video)); //send log to 3rd party cloud log service: logentries
this.player.pause(); // stop html5 video player video.js in the page
this.navCtrl.push("DubPage", { video: this.video }); // go to DubPage does NOT work in play store released apk version;
}
In addtion, my package.json
{
"name": "dubwork",
"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"
},
"dependencies": {
"#angular/common": "4.1.2",
"#angular/compiler": "4.1.2",
"#angular/compiler-cli": "4.1.2",
"#angular/core": "4.1.2",
"#angular/forms": "4.1.2",
"#angular/http": "4.1.2",
"#angular/platform-browser": "4.1.2",
"#angular/platform-browser-dynamic": "4.1.2",
"#ionic-native/camera": "3.10.2",
"#ionic-native/core": "3.10.2",
"#ionic-native/facebook": "^3.10.3",
"#ionic-native/file": "^3.10.3",
"#ionic-native/keyboard": "^3.10.3",
"#ionic-native/media": "^3.10.3",
"#ionic-native/splash-screen": "3.10.2",
"#ionic-native/status-bar": "3.10.2",
"#ionic-native/transfer": "^3.10.3",
"#ionic/storage": "2.0.1",
"angular2-logger": "^0.6.0",
"angularfire2": "^4.0.0-rc.1",
"cordova-android": "^6.2.3",
"cordova-plugin-compat": "^1.1.0",
"cordova-plugin-console": "^1.0.7",
"cordova-plugin-crosswalk-webview": "^2.3.0",
"cordova-plugin-device": "^1.1.6",
"cordova-plugin-facebook4": "^1.9.1",
"cordova-plugin-file": "^4.3.3",
"cordova-plugin-file-transfer": "^1.6.3",
"cordova-plugin-media": "^3.0.1",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.3",
"cordova-plugin-whitelist": "^1.3.2",
"cordova-plugin-wkwebview-engine": "git+https://github.com/driftyco/cordova-plugin-wkwebview-engine.git",
"firebase": "^3.9.0",
"ionic-angular": "3.3.0",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.11"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.7",
"#ionic/cli-plugin-cordova": "1.4.0",
"#ionic/cli-plugin-ionic-angular": "1.3.1",
"typescript": "2.3.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-facebook4": {
"APP_ID": "229997797493525",
"APP_NAME": "dubLearn-mobile"
},
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"cordova-plugin-crosswalk-webview": {
"XWALK_VERSION": "23+",
"XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
"XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
"XWALK_MODE": "embedded",
"XWALK_MULTIPLEAPK": "true"
},
"cordova-plugin-wkwebview-engine": {},
"cordova-plugin-media": {},
"cordova-plugin-file-transfer": {}
},
"platforms": [
"android"
]
}
}
It turns out that the error was caused by using angular2-logger package alone. logentries is irrelevant.
Steps to reproduce the issue:
ionic start logger-bug blank
npm install --save angular2-logger
add angular2-logger package in app.module.ts provider
add angular2-logger package in home.ts and log a debug message
using ionic cordova run android, the app opens in android device without error
using ionic cordova run android --prod, the app shows promise t error
I am using ionic 2.
I create new project
ionic start Ismart --v2
The project was successfully created.
I tried to run the project using ionic serve
I am getting this err
Cannot find namespace 'moment'
Here is my Package.Json
{
"name": "ionic-hello-world",
"version": "0.0.0",
"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": "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.4.2",
"#ionic-native/splash-screen": "3.4.2",
"#ionic-native/status-bar": "3.4.2",
"#ionic/storage": "2.0.1",
"ionic-angular": "3.1.0",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.5"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.6",
"typescript": "~2.2.1"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "ISmartpremises: An Ionic project"
}
How can i fix this issue...
Kindly advice me,
Thanks
I cannot see any issue in your package.json file.I think you have forgotten to change the directory.
You can try as shown below.
d:\ionic2 > ionic start Ismart blank --v2
d:\ionic2\Ismart> ionic serve
I've been trying to get the Ionic watch to work, but I've been getting an error.
I created a brand new app with the following command:
ionic start my-app --v2
This seems to work fine, then I try to serve the app
ionic serve -p $PORT
However, I get the following error
watch failed: A watch configured to watch the following paths failed to start. It likely that a file
referenced does not exist: /home/ubuntu/workspace/my-app/src/**/*.(ts|html|s(c|a)ss)
I can see that the src folder does exist in the path shown in the error. Is there a way I can resolve this error? I'm using the C9 IDE and installed Ionic with the following command
sudo npm install ionic cordova -g
Here is my package.json in case it is needed:
{
"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.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-native/core": "3.1.0",
"#ionic-native/splash-screen": "3.1.0",
"#ionic-native/status-bar": "3.1.0",
"#ionic/storage": "2.0.0",
"ionic-angular": "2.2.0",
"ionicons": "3.0.0",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.7.2"
},
"devDependencies": {
"#ionic/app-scripts": "1.1.4",
"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": "my-app: An Ionic project"
}
I had the same error, I resolved it by deleting node_modules directory and run npm install