Angular Ionic With Capacitor on android platform not working

I have created a ionic app in NX workspace with following steps:-

  1. npm install --save-dev @nxtend/ionic-angular
  2. nx generate @nxtend/ionic-angular:init
  3. nx generate @nxtend/ionic-angular:app ionic-app
  4. npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save
  5. nx serve ionic-app – [Running locally on web browser]
  6. nx build ionic-app – [Build and create web asset folder]
  7. nx run ionic-app:add:android
  8. nx run ionic-app:copy:android
  9. nx run ionic-app:sync:android
  10. nx run ionic-app:open:android

above last command open the Android Studio and while running the application I am getting error in logcat.

  1. E/Capacitor: Unable to read file at path public/plugins
  2. E/libEGL: validate_display:99 error 3008 (EGL_BAD_DISPLAY)
  3. CORS issue while making the service call.

Can somebody help to understand about these above issues?
I am available to discuss more on this issue and I am new to ionic capacitor.

Looking ahead for your reply.

Note:- The Angular Ionic Application is perfectly working in chrome browser when running chrome browser disabling the security mode flag. Not working in android device and emulator.

Thanks & Regards,
Alok Pandey

  1. That’s just because you don’t have any cordova plugins, but the error is harmless
  2. That’s some openGL error, should be harmless too
  3. That means there is a CORS error, meaning your app is trying to make some connection but it’s being blocked because your server doesn’t allow CORS

I’ve tried to run those commands but I just get a lot of errors from nx, so I can’t try them. @nxtend/ionic-angular is out of date, so I don’t recommend using it at the moment.

If @nxtend/ionic-angular is out of date then how we can create a IONIC Angular application in nx workspace.

When running the application in browser I can see the JSON response but call to API is 200 status code.
On mobile when I am running the code but don’t see the response even the call to API is successful and status code is 200.

I am able to solve the CORS issue by updating the capacitor.config.josn adding the below code :-

“server”: {
“hostname”: “URL_OF_HOST”,
“androidScheme”: “https”,
“allowNavigation”: [“URL_OF_HOST”, “*.URL_OF_HOST”]

We have angular web application created in NX workspace and I want to use IONIC to bring on mobile.
I am very new to IONIC platform. Please provide me any tutorial link or resource which can guide me the right approach.

Looking ahead for your quick response.

Sorry, I have no idea about nx nor nxtend, they are not created nor maintained by ionic.

what is correct way to resolve the CORS issue when from angular ionic app ?
What setting need to be updated in the client code?

We have this CORS guide available

1 Like