Using ng-packagr to build Ionic component library - ionic-framework

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

UNMET PEER DEPENDENCY error for ionic-paypal

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.

Ionic 3: ios-file-picker crashing app on device running iOS 10.x, not 11

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"
}

navController.push does not open next page in release-apk

---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

Cannot find namespace 'moment'

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

Ionic 2 - watch failed: A watch configured to watch the following paths failed to start

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