Angular 6 page gets redirects to homepage without doing any router methods

Question

I'm using jquery datatable in my angular 6 application. If I use the table in home page the table loads perfectly. But if I try to use the same table in different component and try to route to that page the view initiates for few sec and then it automatically redirected to home page. If I hide the table on that component the routing works perfectly. I don't see any error or warning in my console. so I couldn't able to find what is the source of the problem. someone kindly help me out.

home-page.component.html <p> home-page works! </p> <div [routerLink]="['/transactions']">Table</div>

app-routing.module.ts

import { Routes, RouterModule } from '@angular/router';
import { TransactionsComponent } from './transactions/transactions.component';
import { HomePageComponent } from './home-page/home-page.component';

const routes: Routes = [
  { path: 'transactions', component: TransactionsComponent },
  { path: '', component: HomePageComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

stackblitz url Issue I'm Facing

Editor url

/* import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { TransactionsComponent } from './transactions/transactions.component'; const routes: Routes = [ { path: 'transactions', component: TransactionsComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } */ This is my route module — Gopu V, Jun 24 '19 at 12:15

Sneha Pawar · Answer 1 · 2019-06-24T12:28:17.843

0

You need to set default path for your application

Replace your routing as follows:

const routes: Routes = [{  path: '', component: **add home component here** },
   { path: 'transactions', component: TransactionsComponent }];

when you navigate to transaction page add slash(/) before routing tag as follows

[routerLink]="['/transactions']"

edited Jun 24 '19 at 12:28

answered Jun 24 '19 at 12:19

Sneha Pawar

1,097
6
14

Even I added the default path it will not redirects to **transactions** path. – Gopu V Jun 24 '19 at 12:21
share your code from where you navigate to transaction page – Sneha Pawar Jun 24 '19 at 12:22
**app.routing.module.ts** `const routes: Routes = [ { path: 'transactions', component: TransactionsComponent }, { path: '', component: TransactionsComponent }, ];` **app.component.html** `
Table
` – Gopu V Jun 24 '19 at 12:29
In your routing, For default page as well as transaction page you are navigating to the same page . please make sure what is your home component and set home component for default one – Sneha Pawar Jun 24 '19 at 12:32
[Issue link] (https://www.loom.com/share/0483b9f21cbd43a0bb68d7c934e40109) See the issue I'm facing @Sneha Pawar – Gopu V Jun 24 '19 at 12:34
**app.routing** `const routes: Routes = [ { path: 'transactions', component: TransactionsComponent }, { path: '', component: HomePageComponent }, ];` **home-page.component.html** `
home-page works!

Table
` https://www.loom.com/share/273bba5ebad74d6ab510579af23d926c Even i added some different component as home component it will gives the same issue – Gopu V Jun 24 '19 at 12:39
You are doing something wrong. create application on stackblitz.com – Sneha Pawar Jun 24 '19 at 12:49
This is my stackblitz. See the issue I'm facing https://angular-datatable-redirect.stackblitz.io editor url -- https://stackblitz.com/edit/angular-datatable-redirect – Gopu V Jun 25 '19 at 06:10
Hi I corrected my issue. I wrongly put the authorisation check so only page gets redirected to the homepage – Gopu V Jun 25 '19 at 10:46

Angular 6 page gets redirects to homepage without doing any router methods

1 Answers1