0

I have a login form which should redirect to the main applications page:

I am unsure how to navigate to this page: app/analytics and think that it's due to the set up of my routes that I am unable to navigate to the correct page upon submission of a login form.

This is what I have attempted so far.

app.routes

export const ROUTES: Routes = [
  {
    path: 'login', loadChildren: './pages/login/login.module#LoginModule'
  },
  {
    path: '', redirectTo: 'app/analytics', pathMatch: 'full'
  },
  {
    path: 'app',   loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard]
  },
  {
    path: 'error', component: ErrorComponent
  },
  {
    path: '**',    component: ErrorComponent
  }
];

layout.routes

const routes: Routes = [
    { path: '', component: LayoutComponent, children: [
    { path: 'analytics', loadChildren: '../pages/analytics/analytics.module#AnalyticsModule' },
    { path: 'profile', loadChildren: '../pages/profile/profile.module#ProfileModule' },
    { path: 'widgets', loadChildren: '../pages/widgets/widgets.module#WidgetsModule' },
  ]}
];

export const ROUTES = RouterModule.forChild(routes);

My router-outlet exists in layout.template and app.component

I have a login component that calls

this.router.navigate['app/analytics']


export class LoginComponent {
  @HostBinding('class') classes = 'login-page app';

  constructor(private auth: AuthService, private router: Router) {}

  loginUser(event) {
    event.preventDefault();
    const target = event.target;
    console.log(target)
    const username = target.querySelector('#username').value;
    const password = target.querySelector('#password').value;

    this.auth.getUserDetails(username, password).subscribe(data => {
      console.log(data.status)
      if(data.status == "success") {
        this.router.navigate['app/analytics'];
        this.auth.setLoggedIn(true);
        console.log(this.auth.isLoggedIn);
      }
      else {
        window.alert(data.message)
      }
    });
  }
}

This is called on this my login.template:

            <form class="login-form mt-lg" (submit)="loginUser($event)">
              <div class="form-group">
                <input type="text" class="form-control" id="username" value="USERNAME" placeholder="Username">
              </div>
              <div class="form-group">
                <input class="form-control" id="password" type="password" value="PASSWORD" placeholder="Password">
              </div>
              <div class="clearfix">
                <div class="btn-toolbar float-right m-t-1">
                  <button type="button" class="btn btn-default btn-sm">Create an Account</button>
                  <button type="submit" class="btn btn-inverse btn-sm" >Login</button>
                </div>
              </div>
              <div class="row m-t-1">
                <div class="col-md-6 order-md-2">
                  <div class="clearfix">
                    <div class="form-check abc-checkbox widget-login-info float-right pl-0">
                      <input class="form-check-input" type="checkbox" id="checkbox1" value="1">
                      <label class="form-check-label" for="checkbox1">Keep me signed in </label>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 order-md-1">
                  <a class="mr-n-lg" href="#">Trouble with account?</a>
                </div>
              </div>
            </form>
hello world
  • 306
  • 1
  • 6
  • 28
  • You should use `this.router.navigate['/app/analytics'];`. The slash before _app_ is important. Refer [this answer](https://stackoverflow.com/a/37622179/5358763) for further insight. – M M Sep 09 '19 at 11:51
  • I think you need to call it as `this.router.navigate(['app', 'analytics']);` instead. – ForestG Sep 09 '19 at 11:54
  • Do you use RouterModule inside analytics.module ? – yusufcmrt Sep 09 '19 at 11:56
  • @yusufcmrt I do use routermodule in analytics.module, RouterModule.forChild(routes), – hello world Sep 09 '19 at 11:58

2 Answers2

1

To fix your issue your have to eddit your router.navigate, in the LoginComponent, to start at root: this.router.navigate(['/app/analytics']); (dont forget the parentheses), otherwise the router will try to navigate to login/app/analytics.

Also make sure your guard let you pass.

I would also remove the redirect from your app.routes {path: '', redirectTo: 'app/analytics', pathMatch: 'full'},, and place it inside layout.routes like: {path: '', redirectTo: './analytics', pathMatch: 'full'},

Pls try to call your methods in this order

this.auth.getUserDetails(username, password).subscribe(data => {
   console.log(data.status)
   if(data.status == "success") {
      this.auth.setLoggedIn(true); // First set login to true
      this.router.navigate(['/app/analytics']); // Then navigate to the route
      console.log(this.auth.isLoggedIn);
   }
   else {
      window.alert(data.message)
   }
});
Norbert Bartko
  • 2,468
  • 1
  • 17
  • 36
  • Sorry got a typo, i meant `/app/analytics`. And make sure the guard return `true` otherwise you can't access the route. – Norbert Bartko Sep 09 '19 at 12:26
  • still behaves the same with the suggested changes. I have ./analytics at the top of my layout routes and changed my navigate route to include the / at the start. – hello world Sep 09 '19 at 12:43
  • tried the rearranging of my getUserDetails, both console.log run. data.success gives "success" and auth.isLoggedIn gives "true". this router.navigate remains on the same login page – hello world Sep 09 '19 at 13:08
  • 1
    Is it possible you just forgot to user `router.navigate` as a function with `()`? e.g. `this.router.navigate(['/app/analytics']);` (see answer) – Norbert Bartko Sep 09 '19 at 13:47
  • the parenthesis was the problem. thank you so much. – hello world Sep 09 '19 at 13:51
  • Your welcome. Also, if the answer solved your problem you could mark it as `accepted` to help others find a solution faster. – Norbert Bartko Sep 09 '19 at 13:54
1

You have to the componant using:

this.router.navigate[''];

Kapil Singhal
  • 101
  • 4