Angular 4 redirects to root path when browser reloads

Question

The page is currently http://localhost:4200/foo.

Case 1: If I press the browser's reload button or type the same url in the browser, the page redirects to http://localhost:4200 (root path).

I'd like the page keeps in the same url (http://localhost:4200/foo).

Case 2: If I type http://localhost:4200/foo (same url) the page redirects to http://localhost:4200 (root path).

I also would like the page keeps in the same url I've typed (http://localhost:4200/foo).

Otherwise, if the page is http://localhost:4200 and I type http://localhost:4200/foo, it works fine. I can navigate by url paths normally. The problem is only when I go to the same path.

My root path in app.module.ts is:

const rootRouting: ModuleWithProviders = RouterModule.forRoot([
    {
        path: 'foo',
        loadChildren: './foo/foo.module#FooModule'
    },
    {
        path: '',
        loadChildren: './bar/bar.module#BarModule'
    },
], { });

And my path in foo.module.ts is:

    const fooRouting: ModuleWithProviders = RouterModule.forChild([
      {
        path: 'foo',
        component: FooComponent
      }
    ]);

OBS: This question Angular 5 - redirect page to homepage on browser refresh wants exactly the opposite of mine. Now, I don't know what is the Angular default behavior for this cases.

Edit after DiPix's correction:

My root path in app.module.ts is:

const rootRouting: ModuleWithProviders = RouterModule.forRoot([
    {
        path: 'foo',
        loadChildren: './foo/foo.module#FooModule'
    },
    {
        path: '',
        loadChildren: './bar/bar.module#BarModule'
    },
], { });

And my path in foo.module.ts is:

    const fooRouting: ModuleWithProviders = RouterModule.forChild([
      {
        path: '',
        pathMatch: 'full',
        component: FooComponent
      }
    ]);

Edit 2:

Debugging with google chrome, I've set "Preserve log".

Testing with any other site, if you are at "www.anydomain.com/path" and you reload the browser, chrome writes "Navigated to 'www.anydomain.com/path'.

Testing with my app, if I am at "http://localhost:4200/foo" and I reload the browser, chrome writes "Navigated to 'http://localhost:4200/'.

The browser navigates to root path!

Gabrielgabriela

It looks like you don't have any root routes setup. Child roots are found after finding a root route. So, you could simply setup a root route for '' and use your child routes for the child routes to that path. - angular.io/guide/router – Scrounge

@Igor Can you please check that is there any common component that you used in your application and there you are redirecting to the user to the '/'. – Marxmarxian

I've double checked that. There are no components redirecting to '/'. – Gabrielgabriela

I've created a new project from zero and there I'm using a different folder structure. It's all working fine there. I'm keeping this question here because I'm still puzzled about why it doesn't work.. – Gabrielgabriela

Did you ever solve this? I'm facing the same issue and it's driving me crazy. – Microspore

@Microspore I didn't. I just took the opportunity to stop using Angular :) – Gabrielgabriela

Answer 1

You need to define some routes at the root of your application. Something like this:

const routes: Routes = [
  { path: 'foo', component: FooComponent},
  { path: '', redirectTo: '/foo', pathMatch: 'full' },
  { path: '**', component: FooComponent }
];

These routes would go where you defined your forRoot() method which from you code looks like:

const rootRouting: ModuleWithProviders = RouterModule.forRoot(routes);

Norvell

I applied what you said. Now my code has some paths in the rootRouting and the child paths in the child modules. I've edited my question. The problem is still the same – Gabrielgabriela

I can navigate properly, but when I reload the page it goes to root path – Gabrielgabriela

Answer 2

You've got path 'foo' in foo.module.ts what is suspicious. As you have already declared this path in app.module.ts. The point is that if you are using lazy loading then you shouldn't import foo.module in app.module. Check your import in app.module. I bet you've import this module. And don't forget to change path to '' in foo.module.ts

Buehrer

You were right, I was importing foo.module in app.module, so I've corrected it and changed the fooRouting. – Gabrielgabriela

However, the problem is still happening. When I reload the page it goes to root path – Gabrielgabriela