Serve of www outside of Ionic does not work

Ionic Framework Ionic Angular
1

I have an Ionic Angular app that I have recently updated.

It works fine with ionic serve or http-serve, but if I try test it with MAMP or move the www folder to to my remote server it does not work.

This used to work previously.

Looking at the console, it appears to have a problem finding a number of files.

I am using Ionic 6.20.1, Angular CLI 13.1.2 on MacOS Ventura 13.1.

Thanks for any tips.

David

2

I have the same issue. Found several old post about this:

None of these fixed the issue. Back then i was able to build the app, copy all files in the www folder and upload to my server and it worked. Now the index.html is blank.

But when i tried the steps here to upload to firebase hosting, it works:

But i don’t want to host on firebase, i want to host on my own server.

It seems theres a bug in the Ionic CLI build process. Would be great if someone in the Ionic Team can tell us whats going on.

1 Like
3

I’m having the same issues.

4

Can anyone from the Ionic team chime in please?

5

So changing the base href didn’t help?

6

No, changing the base href does not help. IIRC you never had to change the base href.

7

Now the index.html is blank.

Open the index.html file inside your www folder in a text editor and:

  1. Add hydrated class to the <html> tag
  2. Replace <app-root></app-root> with some text
<html class="hydrated">
...
<body>
	<h1>This text should be visible.</h1>
</body>

Save the file and reload the page in your browser. Now do you see the text?

8

I don’t know the root cause, but I have found an error that I can correct manually.

In index.html there is a line:

<base href="/"/>

With ionic serve, and with my test server, the code was in the root of the server directory, but when I uploaded it to the remote server it was in a subfolder and failed. when I changed “/” to “./” it worked.

An additional problem was that I just found that it was just randomly changed to:

 <base href="app.scss"/>```

which clearly also does not work. I do not know how that happened, but changing it back to "./" fixed the problem.
1 Like
9

with angular only i usually deploy like this:

ng build --prod --base-href=“/my-app/”
and then
grunt --gruntfile grunt-war.js war

and i use the war file to deploy

gruntfile is made like this

module.exports = function ( grunt ) {
grunt.loadNpmTasks( ‘grunt-war’ );

var taskConfig = {
    war: {
        target: {
            options: {
                war_verbose: true,
                war_dist_folder: 'build',           // Folder path seperator added at runtime.
                war_name: 'my-app',            // .war will be appended if omitted
                webxml_welcome: 'index.html',
                webxml_display_name: 'Grunt WAR'
            },
            files: [
                {
                    expand: true,
                    cwd: 'dist/my-app',
                    src: ['**'],
                    dest: ''
                }
            ]
        }
    }
};

grunt.initConfig( taskConfig );

};`

2 Likes