7

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!

Igor Torres
  • 131
  • 1
  • 8
  • 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. - https://angular.io/guide/router – Notmfb Feb 27 '18 at 23:33
  • @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 '/'. – Debug Diva Jun 12 '18 at 12:33
  • I've double checked that. There are no components redirecting to '/'. – Igor Torres Jun 21 '18 at 19:35
  • 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.. – Igor Torres Jun 21 '18 at 19:42
  • Did you ever solve this? I'm facing the same issue and it's driving me crazy. – werwuifi Apr 26 '23 at 11:13
  • @werwuifi I didn't. I just took the opportunity to stop using Angular :) – Igor Torres May 22 '23 at 10:19

2 Answers2

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);

Narm
  • 10,677
  • 5
  • 41
  • 54
  • 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 – Igor Torres Mar 12 '18 at 23:03
  • I can navigate properly, but when I reload the page it goes to root path – Igor Torres Mar 12 '18 at 23:03
0

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

DiPix
  • 5,755
  • 15
  • 61
  • 108