How to change default start url

Capacitor
1

Hello,
I have an Angular application that I would like to use with Capacitor to make it a mobile app. Normally, the default URL for an Angular application is: http://localhost:4200. However, my application has a default URL in the form: http://localhost:4200/xxx/yyy/zzz/login.

How do I configure Capacitor to launch the mobile application at this URL?

Thank you in advance for your help.

1 Like
2

You would use a standard redirect in your Angular routes - Angular Navigation: How Routing & Redirects Work in Angular Apps

3

Thank you for your reply, but I don’t understand why I need to change my router configuration in the Angular application.

The URL of my web application is: http://localhost:4200/xxx/yyy/zzz/login.

Capacitor, by default, requires an address in the range: http://localhost:4200.

How do I configure Capacitor to start at the URL: http://localhost:4200/xxx/yyy/zzz/login?

Or perhaps there’s something I’m missing. The web version of the application already works. I just want to be able to make it a mobile version.

4

By default, Capacitor runs an Android app at https://localhost and an iOS app at capacitor://localhost. But, your app should be designed to use relative URLs so that shouldn’t matter.

I don’t know that you can change what URL Capacitor starts at. I would assume it’s always the base URL. Why can’t you just redirect the base URL to xxx/yyy/zzz/login on app start with your Angular route config? That’s what we do in our Vue app. If not logged in on app launch, we redirect to the Login screen.

5

Trying to make it, but i have a white screen

I added :
{path:'', redirectTo:'/xxx/yyy/zzz', pathMatch:'full}

Trying :

{path:'/', redirectTo:'/xxx/yyy/zzz', pathMatch:'full}

And, I have blank screen in all case

1 Like
6

A white screen usually means a JS error. Check DevTools. For an Android device running via Android Studio, you can go to chrome://inspect/#devices in Chrome to open DevTools for you app running on the device.

7

Can you explain exactly what are you trying to achieve! may be that would help the community to answer your question!.
Are you saying that you want your start page to always be the Login page?
if so, the correct way to do it would be:
{path:'', redirectTo:'login', pathMatch:'full},
{path:'login', loadComponent:LoginPage}

Notice that : redirectTo:'login' and path:'login' should be the same

1 Like