This question already has answers here:
I have an error when executing ionic serve
(13 answers)
Ionic 2 CSP on android
(1 answer)
Closed 3 years ago.
When building Android App from Ionic4 using "ionic cordova build android"
package.json
{
"name": "campusrides_v2.0",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "^7.2.15",
"#angular/core": "^7.2.15",
"#angular/fire": "^5.2.1",
"#angular/forms": "^7.2.2",
"#angular/http": "^7.2.2",
"#angular/platform-browser": "^7.2.2",
"#angular/platform-browser-dynamic": "^7.2.2",
"#angular/router": "^7.2.2",
"#ionic-native/core": "^5.8.0",
"#ionic-native/device": "^5.8.0",
"#ionic-native/fcm": "^5.8.0",
"#ionic-native/geolocation": "^5.8.0",
"#ionic-native/launch-navigator": "^5.15.1",
"#ionic-native/splash-screen": "^5.8.0",
"#ionic-native/status-bar": "^5.8.0",
"#ionic/angular": "^4.5.0",
"#ionic/storage": "^2.2.0",
"angularfire2": "^5.2.1",
"cordova-android": "^8.1.0",
"cordova-plugin-actionsheet": "^2.3.3",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-fcm-with-dependecy-updated": "^2.4.0",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-sqlite-storage": "^3.2.0",
"core-js": "^2.5.4",
"firebase": "^6.2.0",
"firebase-tools": "^7.0.0",
"firebaseui": "^4.0.0",
"firebaseui-angular": "^3.4.2",
"rxjs": "~6.5.1",
"sharp": "^0.22.1",
"tslib": "^1.10.0",
"uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.4",
"zone.js": "~0.8.29"
},
"devDependencies": {
"#angular-devkit/architect": "~0.13.8",
"#angular-devkit/build-angular": "~0.13.8",
"#angular-devkit/core": "~7.3.8",
"#angular-devkit/schematics": "~7.3.8",
"#angular/cli": "~7.3.8",
"#angular/compiler": "~7.2.2",
"#angular/compiler-cli": "~7.2.2",
"#angular/language-service": "~7.2.2",
"#ionic/angular-toolkit": "~1.5.1",
"#ionic/lab": "2.0.4",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.0.8",
"codelyzer": "~4.5.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.1.0",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.1.0",
"tslint": "~5.17.0",
"typescript": "~3.1.6",
"xcode": "^2.0.0"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-geolocation": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-fcm-with-dependecy-updated": {},
"cordova-sqlite-storage": {},
"uk.co.workingedge.phonegap.plugin.launchnavigator": {
"GOOGLE_API_KEY_FOR_ANDROID": "[-------------------------]",
"OKHTTP_VERSION": "3.12.0",
"LOCATION_USAGE_DESCRIPTION": "This app requires access to your location for navigation purposes"
}
},
"platforms": []
}
}
It gives the following error in the browser console when executing "ionic serve"
Refused to load the image 'http://localhost:8100/favicon.ico' because
it violates the following Content Security Policy directive:
"default-src 'none'". Note that 'img-src' was not explicitly set, so
'default-src' is used as a fallback.
Thanks for your time!
Related
My ionic 6 (angular) app is running as expected on an Android simulator when running in debug mode. However when I generate the aab it gives an error I don't understand. The same happens if I launch the app with ionic cordova run android --prod
main.737916f90481aca1.js:1 ERROR Error: Uncaught (in promise): TypeError: n.factory is not a function
TypeError: n.factory is not a function
at $d.hydrate (main.737916f90481aca1.js:1:455563)
at $d.get (main.737916f90481aca1.js:1:454139)
at $d.get (main.737916f90481aca1.js:1:454187)
at Ay.get (main.737916f90481aca1.js:1:478835)
at _a (main.737916f90481aca1.js:1:437674)
at Da (main.737916f90481aca1.js:1:438151)
at Object.Cs (main.737916f90481aca1.js:1:465938)
at M.component.e.ɵfac [as factory] (4987.e5c5c75110c5e2ce.js:1:3444)
at Vo (main.737916f90481aca1.js:1:439842)
at hy (main.737916f90481aca1.js:1:481079)
at X (polyfills.c13b04107186556f.js:1:17774)
at X (polyfills.c13b04107186556f.js:1:17309)
at polyfills.c13b04107186556f.js:1:18614
at v.invokeTask (polyfills.c13b04107186556f.js:1:8389)
at Object.onInvokeTask (main.737916f90481aca1.js:1:516776)
at v.invokeTask (polyfills.c13b04107186556f.js:1:8310)
at v.runTask (polyfills.c13b04107186556f.js:1:3448)
at A (polyfills.c13b04107186556f.js:1:10775)
Following my package.json
{
"name": "ecove",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "^14.2.9",
"#angular/core": "^14.2.9",
"#angular/forms": "^14.2.9",
"#angular/platform-browser": "^14.2.9",
"#angular/platform-browser-dynamic": "^14.2.9",
"#angular/router": "^14.2.9",
"#awesome-cordova-plugins/camera": "^6.1.0",
"#awesome-cordova-plugins/core": "^6.1.0",
"#awesome-cordova-plugins/diagnostic": "^6.1.0",
"#awesome-cordova-plugins/geolocation": "^6.3.0",
"#awesome-cordova-plugins/http": "^6.1.0",
"#awesome-cordova-plugins/in-app-browser": "^6.1.0",
"#awesome-cordova-plugins/network": "^6.1.0",
"#awesome-cordova-plugins/safari-view-controller": "^6.3.0",
"#awesome-cordova-plugins/splash-screen": "^6.3.0",
"#awesome-cordova-plugins/status-bar": "^6.1.0",
"#capacitor/browser": "^4.1.0",
"#capacitor/core": "4.6.1",
"#ionic-native/android-permissions": "^5.36.0",
"#ionic-native/http": "^5.36.0",
"#ionic-native/in-app-browser": "^5.36.0",
"#ionic-native/splash-screen": "^5.36.0",
"#ionic/angular": "^6.4.2",
"#ionic/cordova-builders": "^7.0.0",
"#ionic/core": "^6.4.2",
"#ionic/storage-angular": "^3.0.6",
"#ngx-translate/core": "^14.0.0",
"#ngx-translate/http-loader": "^7.0.0",
"cordova": "^11.1.0",
"cordova-plugin-advanced-http": "^3.3.1",
"cordova-plugin-android-permissions": "^1.1.5",
"cordova-plugin-camera": "^6.0.0",
"cordova-plugin-file": "^7.0.0",
"cordova-plugin-inappbrowser": "^5.0.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-network-information": "^3.0.0",
"cordova-plugin-splashscreen": "^6.0.2",
"cordova-plugin-statusbar": "^3.0.0",
"cordova-res": "^0.15.4",
"cordova.plugins.diagnostic": "^7.1.1",
"crypto-js": "^4.1.1",
"ionicons": "^6.0.3",
"node-js-marker-clusterer": "^1.0.0",
"rxjs": "~6.6.0",
"swiper": "^8.3.2",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.2.9",
"#angular-eslint/builder": "^14.0.0",
"#angular-eslint/eslint-plugin": "^14.0.0",
"#angular-eslint/eslint-plugin-template": "^14.0.0",
"#angular-eslint/template-parser": "^14.0.0",
"#angular/cli": "^14.2.9",
"#angular/compiler": "^14.2.9",
"#angular/compiler-cli": "^14.2.9",
"#angular/language-service": "^14.2.9",
"#capacitor/cli": "4.6.1",
"#ionic/angular-toolkit": "^6.0.0",
"#ionic/lab": "3.2.13",
"#types/jasmine": "~4.0.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"#typescript-eslint/eslint-plugin": "5.3.0",
"#typescript-eslint/parser": "5.3.0",
"cordova-android": "^10.1.2",
"cordova-plugin-geolocation": "^4.1.0",
"cordova-plugin-ionic-webview": "^5.0.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~4.3.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.8.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-statusbar": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-advanced-http": {},
"cordova.plugins.diagnostic": {
"ANDROIDX_VERSION": "1.0.0",
"ANDROIDX_APPCOMPAT_VERSION": "1.3.1"
},
"cordova-plugin-geolocation": {
"GPS_REQUIRED": "true"
},
"cordova-plugin-safariviewcontroller": {},
"cordova-plugin-enable-multidex": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-android-permissions": {}
},
"platforms": []
}
}
Any help will be welcomed. Thanks.
I have revised dependencies and all seems to be well configured.
I get this error:
JavaScript Error: {"type":"js.error","error":{"message":"Uncaught SyntaxError: Unexpected token ?","url":"http://localhost/vendor.js","line":24288,"col":28,"errorObject":"{}"}} File: http://localhost/ - Line 582 - Msg: SyntaxError: Unexpected token ? File: http://localhost/vendor.js - Line 24288 - Msg: Uncaught SyntaxError: Unexpected token ?
when I run the application in the android emulator. And the app does not want to start, just crashes and shows this error in Logcat. I was open that file and this is what I find in that line:
this._baseHref = href ?? this._platformLocation.getBaseHrefFromDOM() ?? (0,_angular_core__WEBPACK_IMPORTED_MODULE_0__.inject)(DOCUMENT).location?.origin ?? '';
which belongs to this:
class PathLocationStrategy extends LocationStrategy
If helps I can share vendor.js file with you. But please help me or help me to address who is responsible for it.
Here is my package.json:
"dependencies": { "#angular/common": "^14.2.3", "#angular/core": "^14.2.3", "#angular/forms": "^14.2.3", "#angular/platform-browser": "^14.2.3", "#angular/platform-browser-dynamic": "^14.2.3", "#angular/router": "^14.2.3", "#capacitor/android": "^4.3.0", "#capacitor/app": "^4.0.1", "#capacitor/core": "^4.3.0", "#capacitor/filesystem": "^4.1.1", "#capacitor/haptics": "^4.0.0", "#capacitor/ios": "^4.3.0", "#capacitor/keyboard": "^4.0.0", "#capacitor/status-bar": "^4.0.0", "#ionic-native/camera": "^5.36.0", "#ionic-native/core": "^5.36.0", "#ionic-native/file": "^5.36.0", "#ionic-native/splash-screen": "^5.36.0", "#ionic-native/status-bar": "^5.36.0", "#ionic/angular": "^6.2.9", "#ngx-translate/core": "^14.0.0", "#ngx-translate/http-loader": "^7.0.0", "animate.css": "^4.1.1", "cordova-plugin-camera": "^6.0.0", "cordova-plugin-file": "^7.0.0", "date-fns": "^2.29.0", "ionic-selectable": "^4.9.0", "rxjs": "~7.5.7", "tslib": "^2.4.0", "twilio-video": "^2.24.1", "zone.js": "~0.11.8" }, "devDependencies": { "#angular-devkit/architect": "^0.1402.4", "#angular-devkit/build-angular": "^14.2.3", "#angular-devkit/core": "^14.2.4", "#angular-eslint/builder": "~13.3.0", "#angular-eslint/eslint-plugin": "~13.3.0", "#angular-eslint/eslint-plugin-template": "~13.3.0", "#angular-eslint/template-parser": "~13.3.0", "#angular/cli": "^14.2.3", "#angular/compiler": "^14.2.3", "#angular/compiler-cli": "^14.2.3", "#angular/language-service": "^14.2.3", "#capacitor/cli": "^4.0.0", "#ionic/angular-toolkit": "^7.0.0", "#types/jasmine": "~3.6.0", "#types/jasminewd2": "~2.0.3", "#types/node": "^12.11.1", "#typescript-eslint/eslint-plugin": "4.16.1", "#typescript-eslint/parser": "4.16.1", "cordova-plugin-device": "^2.0.2", "cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-webview": "^4.2.1", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "^2.4.2", "eslint": "^7.6.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "jasmine-core": "~3.8.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~10.9.1", "typescript": "~4.8.4" },
Changed in tsconfig.json from:
"target": "es2020",
into:
"target": "es2015",
and looks all works!
I have created a capacitor application form starter. I have installed few plugins and tried to build application through android studio. There is no error on building application but when it launches it gives error like
Capacitor build error
My package.json is
{
"name": "Ionic App",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~13.2.2",
"#angular/core": "~13.2.2",
"#angular/forms": "~13.2.2",
"#angular/platform-browser": "~13.2.2",
"#angular/platform-browser-dynamic": "~13.2.2",
"#angular/router": "~13.2.2",
"#awesome-cordova-plugins/admob": "^5.41.0",
"#awesome-cordova-plugins/app-version": "^5.41.0",
"#awesome-cordova-plugins/clipboard": "^5.41.0",
"#capacitor/android": "3.5.1",
"#capacitor/app": "1.1.1",
"#capacitor/browser": "^1.0.7",
"#capacitor/core": "^3.5.0",
"#capacitor/haptics": "1.1.4",
"#capacitor/keyboard": "1.2.2",
"#capacitor/status-bar": "1.0.8",
"#ionic/angular": "^6.0.0",
"cordova-admob": "^5.1.0",
"cordova-clipboard": "^1.3.0",
"cordova-connectivity-monitor": "^1.2.2",
"cordova-play-services-version-adapter": "^1.1.0",
"cordova-plugin-app-version": "^0.1.14",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.2.3",
"#angular-eslint/builder": "~13.0.1",
"#angular-eslint/eslint-plugin": "~13.0.1",
"#angular-eslint/eslint-plugin-template": "~13.0.1",
"#angular-eslint/template-parser": "~13.0.1",
"#angular/cli": "~13.2.3",
"#angular/compiler": "~13.2.2",
"#angular/compiler-cli": "~13.2.2",
"#angular/language-service": "~13.2.2",
"#capacitor/cli": "^3.4.3",
"#ionic/angular-toolkit": "^6.0.0",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"#typescript-eslint/eslint-plugin": "5.3.0",
"#typescript-eslint/parser": "5.3.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.4.4"
},
"description": "Ionic app"
}
Can anyone know how to solve this?
I’m trying to publish my first APK on the google store, and are requesting
android.permission.CAMERA, android.permission.RECORD_AUDIO, but i don’t use camera or audio plugins. Just use the location, how do I solve it?
Ionic V5 with Capacitor and Angular
my package json:
{
"name": "myapp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"#capacitor/android": "^2.0.1",
"#capacitor/core": "2.0.1",
"#capacitor/ios": "^2.0.1",
"#ionic-native/core": "^5.0.7",
"#ionic-native/geolocation": "^5.25.0",
"#ionic-native/in-app-browser": "^5.25.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^5.0.0",
"cordova-plugin-geolocation": "^4.0.2",
"cordova-plugin-inappbrowser": "^3.2.0",
"core-js": "^2.5.4",
"ngx-mask": "8.2.0",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.20",
"#angular/cli": "~8.3.23",
"#angular/compiler": "~8.2.14",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#capacitor/cli": "2.0.1",
"#ionic/angular-toolkit": "^2.1.1",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project"
}
Remove the permission that you don’t need from the AndroidManifest.xml.
Capacitor adds all the permissions the plugins need, but you can remove the ones your app doesn’t use.
I want to run my Ionic project with capacitor and I have tried different way to run Ionic project with capacitor even I have created an Ionic blank project using Ionic CLI but I can't do that because of this android studio error:
error: resource style/Base.V28.Theme.AppCompat.Light (aka com.mahdi.myapp2:style/Base.V28.Theme.AppCompat.Light) not found.
This error occurs when I want to build or run my project with android studio. Inside the visual studio code, I don't get an Error
Ionic version: 5.4.13
Node version: v10.15.3
Npm version: 6.4.1
Thanks for your help
Here is my package.json file:
{
"name": "myApp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~8.1.2",
"#angular/core": "~8.1.2",
"#angular/forms": "~8.1.2",
"#angular/platform-browser": "~8.1.2",
"#angular/platform-browser-dynamic": "~8.1.2",
"#angular/router": "~8.1.2",
"#capacitor/android": "^1.4.0",
"#capacitor/core": "1.4.0",
"#ionic-native/core": "^5.0.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^4.7.1",
"core-js": "^2.5.4",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/architect": "~0.801.2",
"#angular-devkit/build-angular": "~0.801.2",
"#angular-devkit/core": "~8.1.2",
"#angular-devkit/schematics": "~8.1.2",
"#angular/cli": "~8.1.2",
"#angular/compiler": "~8.1.2",
"#angular/compiler-cli": "~8.1.2",
"#angular/language-service": "~8.1.2",
"#capacitor/cli": "1.4.0",
"#ionic/angular-toolkit": "^2.1.1",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project"
}
This is related to the libraries installed in your android studio, and nothing to do with ionic settings..
Try steps in this link