Path problem after building an Ionic web application

Hi all,

I’m new to Ionic development and have just finished an application which I want to build and deploy as a normal web application. When I try to build it I struggle with a path problem. The easiest way to see my problem is when you create a new project.

ionic start my-app sidemenu

Everything is okay when I run it in the browser.

ionic serve

With no changes I build it for production.

ionic build --prod

When I copy the content of the www folder into a subfolder on my webserver (e.g. mobile) it fails to start because it tries to find the css and js files in the root of the webserver.

On https://github.com/ionic-team/ionic-cli/issues/3600 I found that I have to set the base-href (this seems to be undocumented on ionic build --help).

ionic build --prod -- --base-href /mobile/

This works better and the application is running but it still tries to find the assets in the assets folder below the root folder (/htdocs/assets/ instead /htdocs/mobile/assets/. In the example app it’s only the file shapes.svg but in my app I have some more images and the translation files there.

Is there a way to set something like “–relative-paths” when building the application? Or is there another way?

Some additional information:
Ionic CLI : 5.2.1
Ionic Framework : @ionic/angular 4.6.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

1 Like

I ran into the same situation using IIS. I followed the instructions within the deployment section of Angular’s documentation and fixed the problem. The issues is related to URL redirects.

Hi, have you solved the problem? (same for ionic 4 and 5)

1 Like

As far as I can remember, I have not really been able to solve the problem. I just copied a folder with all the svg files in an svg folder below the document root folder. It worked but in my eyes that’s not an appropriate solution.

Thanks…

This is some command that could be useful for someone :rofl:
ionic build --prod -- --base-href /mobile --deploy-url /statics/app/

I still have the same issue, i tried different things but it still does not work

ionic cordova build browser --prod --release – --base-href=/mobile

There is any solution?

Thanks!

1 Like

I think there’s a misunderstanding: the OP referred to Ionic 4, though the question has been tagged as “ionic-v3”

Ionic 3 uses ionic-app-scripts, which in turn uses webpack (instead of the Angular CLI) to generate the build, so the --base-href and --deploy-url flags from the Angular CLI won’t work on Ionic 3 apps.

1 Like

I fixed the problem by modifying the base tag in the index.html file

<base href="/myFolder/"/>

Not a great idea, because it won’t stick. Generally I think this entire topic is best handled by the deployment configuration, but if you absolutely insist on setting baseHref, do it in angular.json.