web-dev-qa-db-fra.com

Redirection de routage angulaire 6

Je suis nouveau sur Angular et j'écris ma première application Angular pour le tableau de bord administrateur.

Je dois configurer deux mises en page

  1. pour l'authentification comme la connexion, la déconnexion, le mot de passe oublié, etc.
  2. le tableau de bord d'administration viendra après la connexion

pour cela, j'ai configuré deux composants de mise en page

  1. admin-layout
  2. auth-layout

et mettre tous les composants auth dans le module auth

La structure de répertoire de mon application est comme

app
|- e2e
|- node_modules
|- src
   |- app
      |- auth (module)
         |- login (component)
            |- login.component.ts
            |- login.component.html
         |- register (component)
            |- register.component.ts
            |- register.component.html
         |- auth.module.ts
      |- dashboard (component for auth users)
         |- dashboard.component.ts
         |- dashboard.component.html
      |- layouts ( directory)
         |- admin-layout (component)
            |- admin-layout.component.html
            |- admin-layout.component.ts
            |- admin-layout.module.ts
            |- admin-layout.routing.ts
         |- auth-layout (component)
            |- auth-layout.component.html
            |- auth-layout.component.ts
            |- auth-layout.module.ts
            |- auth-layout.routing.ts
      |- app.component.html
      |- app.component.ts
      |- app.module.ts
      |- app-routing.module.ts
   |- assets
   |- index.html

contenu de app-routing.module.ts

import { NgModule } from '@angular/core';

import {AppRoutingModule} from './app-routing.module';
import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {HttpClientModule} from '@angular/common/http';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ComponentsModule} from './components/components.module';
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';

@NgModule({
  declarations: [
    AppComponent,
    AdminLayoutComponent,
    AuthLayoutComponent
  ],
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    RouterModule,
    AppRoutingModule,
    NgbModule.forRoot(),
    ComponentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

contenu de app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {AdminLayoutComponent} from './layouts/admin-layout/admin-layout.component';
import {CommonModule} from '@angular/common';
import {BrowserModule} from '@angular/platform-browser';
import {AuthLayoutComponent} from './layouts/auth-layout/auth-layout.component';

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: '', component: AdminLayoutComponent, children: [
      {path: '', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'}
    ] },
  { path: '', component: AuthLayoutComponent, children: [
      {path: '', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule'}
    ]}
];

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

contenu de admin-layout.routing.ts

import { Routes } from '@angular/router';
import {DashboardComponent} from '../../dashboard/dashboard.component';

export const AdminLayoutRoutes: Routes = [
  { path: 'dashboard', component: DashboardComponent}
];

contenu de admin-layout.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AdminLayoutRoutes } from './admin-layout.routing';
import { DashboardComponent } from '../../dashboard/dashboard.component';
import { IconsComponent } from '../../icons/icons.component';
import {ChartsModule} from 'ng2-charts';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    ChartsModule,
    NgbModule
  ],
  declarations: [
    DashboardComponent,
    IconsComponent
  ]
})
export class AdminLayoutModule { }

contenu de auth-layout.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import {AuthLayoutRoutes} from './auth-layout.routing';
import {FormsModule} from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {AuthModule} from '../../auth/auth.module';
import {LoginComponent} from '../../auth/login/login.component';
import {RegisterComponent} from '../../auth/register/register.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AuthLayoutRoutes),
    FormsModule,
    NgbModule,
    AuthModule
  ],
  declarations: [
    LoginComponent,
    RegisterComponent
  ]
})
export class AuthLayoutModule { }

contenu de auth-layout.routing.ts

import {Routes} from '@angular/router';
import {LoginComponent} from '../../auth/login/login.component';
import {RegisterComponent} from '../../auth/register/register.component';
import {ForgotPasswordComponent} from '../../auth/forgot-password/forgot-password.component';
import {ResetPasswordComponent} from '../../auth/reset-password/reset-password.component';

export const AuthLayoutRoutes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
  {path: 'forgot-password', component: ForgotPasswordComponent},
  {path: 'reset-password', component: ResetPasswordComponent}
];

Question

En accédant à localhost:4200, on redirige vers localhost:4200/dashboard et cela fonctionne en tant que chemindashboard est défini dans le routage admin.

Mais en accédant à localhost:4200/login, on redirige vers localhost:4200 et le routage de connexion ne fonctionne pas à partir du routage auth.

URL du code de l'application: https://stackblitz.com/edit/angular-lwevqj
URL de l'application: https://angular-lwevqj.stackblitz.io

angularangular-routing
2
Anuj TBE

Vos itinéraires devraient être comme -

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'admin', component: AdminLayoutComponent, children: [
      {path: '', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'}
    ] },
  { path: 'auth', component: AuthLayoutComponent, children: [
      {path: '', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule'}
    ]}
];

De plus, vos itinéraires d'authentification devraient être comme - 

export const AuthLayoutRoutes: Routes = [
  {path: '', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
  {path: 'forgot-password', component: ForgotPasswordComponent},
  {path: 'reset-password', component: ResetPasswordComponent}
];

Les appels doivent être - 

Login - localhost:4200/auth/login Register - localhost:4200/auth/register De même

6
eduPeeth

Vous devriez changer vos routes principales (remplacez '' par 'login'), je pense que le problème est ici:

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: '', component: AdminLayoutComponent, children: [
      {path: '', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'}
    ] },
  { path: 'login', component: AuthLayoutComponent, children: [
      {path: '', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule'}
    ]}
];
0
simpleDmitry

Il redirige vers /dashboard comme votre fichier de routage global l'a défini en haut pour rediriger tous les appels vers le composant Dashboard.

Voir la première définition path dans votre fichier de routage global

Dans ce projet angulaire, la hiérarchie est construite. On a supposé que l'utilisateur irait d'abord au tableau de bord.

Si vous voulez aller directement au composant de connexion, ajoutez simplement /login pour la route du composant de connexion dans votre fichier de routage global. 

Mais veillez au routage dans votre module de connexion. Je suggérerais d'utiliser le routage enfant de la forme /child1/child2 uniquement si vous voulez vraiment avoir cette URL dépendante. 

Si vous voulez que certains de vos composants soient de la forme /name, ils doivent être présents globalement.

Vous pouvez en voir plus sur Angular 6 Docs

0
Anshuman Upadhyay

vous utilisez ce code {chemin: '', redirectTo: 'tableau de bord', pathMatch: 'complet'} in(app-routing.module.ts)fichier donc sur accéder à localhost: 4200 est redirigé vers localhost: 4200/dashboard et il fonctionne comme un tableau de bord.

réglez d’abord votre par défaut chemin d’emplacement vers lequel vous voulez rediriger comme {chemin: '', redirectTo: 'login', pathMatch: 'complet'} si vous voulez utiliser ce code, votre URL de redirection automatique vers le composant de connexion sera indiquée lorsque vous entrerezlocalhost: 4200.

0
nagender pratap chauhan