Tabs new project refresh not working

Ionic Framework Ionic Angular
1

Hi,
Create new tabs project.

ionic build

http-server www

then you will see in browser "http://127.0.0.1:8081/tabs/tab1"

refresh the page. Then error " This 127.0.0.1 page can’t be found"

Need your help to figure out why it is happening

2

To avoid this, open the app-routing.module.ts file. In RouterModule.forRoot add useHash: true. Unless of course you have angular. I don’t pretend to be the right decision. Example:

  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
      useHash: true,
    })
  ],
3

One thing that would cause this is if you have undiagnosed build errors. If the build is working properly, your hosting environment needs to reroute unrecognized subpaths to index.html.

4

Thanks, It is working fine :slightly_smiling_face:. But it has added hash in between and looks ugly.
http://172.23.0.1:8080/#/tabs/tab1
If there is no other clean way, this is ok.
Many Thanks

5

Thanks for the reply. This is a fresh/new ionic tabs project. I didn’t change any routing or other settings.

6

ionic build is a standard thing to be typing. It, as far as I know, does not launch any sort of httpd. So I don’t know what the http-server www line is supposed to be. I don’t think it’s spawned by the ionic build. If it’s something you’re typing, that’s where the problem is, because of the issue I linked to whereby hosting needs to know how to handle 404s and send them to index.html.

If you run ionic serve instead of (or after) ionic build, it should launch an httpd that is smart enough to deal with this issue. If you don’t want to do that, then, as I said before, make sure whatever httpd you are running is configured to redirect unknown URLs to index.html.

7

Hi, Thanks for the reply.
When I run ionic serve, it is working perfect. Once I deploy it into another server it gives above error.
I am using http-server - npm for launching http server.
Also, I have tried in the IIS windows server as well.
Please try to replicate this issue step by step.

  1. ionic start (tabs project)
  2. ionic build
  3. deploy www folder into IIS or http-server (ionic serve works fine. but we need to deploy it)
  4. goto tab two by selecting it.
  5. Refresh the page.

If the browser navbar is “tabs/tab2”, after a refresh, it shows that page not found. So, if we redirect 404 URLs to index.html, how can we navigate to “tabs/tab2”

Hope I am explaining you good

8

Please read the link in my first post in this thread. It explains exactly what is happening, why, and what to do about it.

The Angular router handles all of that. You just have to make sure it gets a chance to.

9

Hi, Perfect!
I have added web.config in IIS

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

Working nice :hugs:
Many thanks