CODEWITHSUNDEEP
angularangular-router
Prenam
Prenam

Reputation: 117

Angular router shows the relevant url in browser'url bar, but the content of that url is not displayed in browser page

I'm having an issue with the angular router and I think it is pretty much because I'm new to it. This is my scenario. Inside my authModule I have a login page, from which after login success should redirect the user to the Dashboard page which also has 3 children components namely Home, statitics, parameters and notifications. So I end up with this components tree:

AuthModule
    _LoginComponent
      _DashboardComponent
        _HomeComponent
        _StatisticsComponent
        _ParametersComponent
        _NotificationsComponent
  SharedModule

I defined the routes in the authModule like this:

const routes = [
  {path:'', redirectTo: 'login', pathMatch:'full'},
  {
    path: 'login',
    component: LoginComponent,
    children: [
      { path: 'dashboard', component: DashbaordComponent,
        children: [
          {path:'', redirectTo: 'home', pathMatch:'full'},
          {path:'home', component:HomeComponent},
          {path:'statistics', component:StatisticsComponent},
          {path:'parameters', component:ParametersComponent},
          {path:'notifications', component:NotificationsComponent},
        ]
    }
    ]
  }
]

And I redirect to the dashboard after login success from the loginEffect class:

tap(() => (request.user.response == 'ok') ? this.router.navigate(['login/dashboard']) : this.router.navigate(['login']) )

Unfortunately after login action is successfull the url changes to 'login/dashboard' but the dashboard content is not shown. So I tried to put the outlet at the bottom of the login template like this <router-outlet></router-outlet>, and with that the dashboard is displayed beneath the login page which should normally have disappeared but reamains. I think that I shouldn't use the outlet since the dashboard's template is independant from the login's template, and shares nothing with the login template. Only the home, staistics, parameters and notifications share a portion of the dashboard. How can I then make do with this case. I appreaciate your help. If you need further information, please let me know in comment.

UPDATE: (For clarification) I just want to clarify that the redirection was working fine when I didn't nest the dashboad component inside that of login. This is the component tree I had when the routing and the redirection were going fine:

AuthModule
  _LoginComponent (independant path)
  _DashboardComponent (independant path)
     _HomeComponent (nested paths to dashboard)
     _StatisticsComponent (nested paths to dashboard)
     _ParametersComponent (nested paths to dashboard)
     _NotificationsComponent (nested paths to dashboard)
SharedModule

Here dashboard component was not nested inside login, and it was working fine. the reason why I had to change this late components tree to the first I gave in the beginning is to prevent user from getting to dashboard without login, because with this last components tree, user can get to login/dashboard without login. This clarifications are because I can't easily produce a stackblitz for this case.

THE TEMPLATES:

login.component.html

<div class="third-box">
        <div class="sign-in-from">
            <h1 class="mb-0 title">Connexion</h1>
            <form class="mt-4" [formGroup]="form" (ngSubmit)="onSubmit()">
                <div class="form-group">
                    <label>EMAIL</label>
                    <input type="email" class="form-control mb-0"  placeholder="Your identifier" formControlName="username">
                </div>
                <div class="form-group">
                  <label>HI CODE</label>
                  <input class="form-control mb-0"  placeholder="Your HI CODE" formControlName="X_HI_CODE">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">PASSWORD</label>
                    <input type="password" class="form-control mb-0" formControlName="password" placeholder="Your password" >
                </div>
                <div class="form-group">
                    <button class="btn btn-primary float-right">Connexion</button>
                </div>
            </form>
        </div>
      </div>

dashboard.component.html

<mat-drawer-container>
  <mat-drawer mode="side" [opened]="firstSideBarOpen">
    <app-sidebar></app-sidebar>
  </mat-drawer>
  <mat-drawer-content>
    <app-header (toggleSidebarForMe)="FirstSideBarToggler()"></app-header>
    <router-outlet></router-outlet>
  </mat-drawer-content>
</mat-drawer-container>

The home.component.html, statistics.component.html, parameter.component.html and notification.component.html are only html without outlet

Thank you in advance.

Upvotes: 0

Views: 704

Answers (1)

Vasileios Kagklis
Vasileios Kagklis

Reputation: 826

As others pointed out, the snippets you provided are insufficient.

On another note, I don't think that the hierarchy of your routes makes any sense. Why would you want to display the login part after your user is logged in?

See this StackBlitz demo which I think does what you are looking for.

EDIT:

Well, you must be using something in your State to determine that the user is logged in. For simplicity, let's assume that you have a boolean isAuthenticated in a slice of your state:

export interface AuthState {
  isAuthenticated: boolean;
}

Your loginEffect should dispatch a loginSuccess action, if the backend determined the user credentials are correct. The reducer handling the loginSuccess can set the isAuthenticated to true. Then, in your reducer file, you can create a selector and then subscribe to this selector like this:

isLoggedIn$;
constructor(store: Store) { }

ngOnInit() {
    this.isLoggedIn$ = this.store(select(selectIsAuthenticated));
}

See new StackBlitz demo.

Upvotes: 1

Related Questions