Angular Ionic With Capacitor on android platform not working

Capacitor
1

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

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

3

Hi,
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.

4

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

5

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

6

We have this CORS guide available

1 Like