CODEWITHSUNDEEP
angularangular-ui-routerangular8
Senthil Raj
Senthil Raj

Reputation: 71

Angular always re-directs to default path on page reload

I have been developing a new application using Angular and on re-load, the application always loads the default path.

Here are my routes array in the App module. 

const routes: Route[] =[
  {
    path: "products",
    loadChildren: "./products/products.module#ProductsModule"
  }
  ,{
    path: "books",
    loadChildren: "./books/books.module#BooksModule"
  }
  ,{
    path: "clocks",
    loadChildren: "./clocks/clocks.module#ClocksModule"
  }
  ,{
    path: "",
    redirectTo: "products",
    pathMatch: "full"
  }
];

My three modules are products, books, and clocks.

On loading the application first time, the URL we have is localhost:4200/products. (As expected). Then I navigate to localhost:4200/products using the nav bar.

<ul class="nav nav-pills mt-5">
  <li class="nav-item">
    <a class="nav-link" routerLink="products" routerLinkActive="active">Products</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="books" routerLinkActive="active">Books</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="clocks" routerLinkActive="active">Clocks</a>
  </li>
</ul>

On clicking re-load from the path localhost:4200/books, it always loaded the localhost:4200/products, the default URL. But we know that the URL localhost:4200/books has to be loaded.

I have been through various angular links and Angular IO site, but I am not able to figure this one out.

Any help here is very much appreciated.

Upvotes: 1

Views: 1256

Answers (4)

Senthil Raj
Senthil Raj

Reputation: 71

Thanks for your valuable inputs and feedback. The routes and the links that I have provided in the question works fine.

The mistake that I did was I had added an this.router.navigateByUrl() in the ngOnInit() of the first component that I load. This was leading to the issue.

Again thanks everyone, for your inputs.

Upvotes: 0

lsmod
lsmod

Reputation: 294

I believe the issue comes from your link. A splash is missing.

try this way:

<a class="nav-link" routerLink="/books" routerLinkActive="active">Books</a>

Upvotes: -1

Sidhanshu_
Sidhanshu_

Reputation: 2110

You are giving incorrect input for routerLink! Try this.

<ul class="nav nav-pills mt-5">
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/products']" routerLinkActive="active">Products</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/books']" routerLinkActive="active">Books</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/clocks']" routerLinkActive="active">Clocks</a>
  </li>
</ul>

This should work.

Upvotes: 1

Caro
Caro

Reputation: 650

You can try :

<ul class="nav nav-pills mt-5">
  <li class="nav-item">
    <a class="nav-link" routerLink="/products" routerLinkActive="active">Products</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="/books" routerLinkActive="active">Books</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="/clocks" routerLinkActive="active">Clocks</a>
  </li>
</ul>

Upvotes: 1

Related Questions