Path problem after building an Ionic web application

Ionic Framework ionic-v3
1

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
2

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.

3

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

1 Like
4

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.

5

Thanks…

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

6

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
7

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
9

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

<base href="/myFolder/"/>

10

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.

11

How should --base-href be specified in ionic 3