Не может соответствовать ни одному маршруту.Сегмент URL: при использовании нескольких роутеров-розеток

Question

Я новичок в угловой.Я создаю веб-приложение для портала с углом 6.

Этот проект имеет форму входа и несколько страниц пользовательской среды.В верхнем колонтитуле страниц пользовательского окружения нижний колонтитул и дополнительное меню являются общими для всех страниц, но они не видны на странице входа.Итак, я решил назначить два тега <router-outlet> с разными именами для этого.

мои коды в app.component.html, как показано ниже:

<div class="container-fluid">
  <router-outlet name="without_header_and_footer"></router-outlet>
  <router-outlet name="admin_panel"></router-outlet>
</div>

После этого я создаю два сервисадля аутентификации с именами AuthGuardService и GuestGuardService, которые управляют доступом к форме входа и страницам пользовательской среды.

Эти два кода служб приведены ниже:

auth-guard.service.ts

export class AuthGuardService implements CanActivate , CanActivateChild{
  constructor(private authService: AuthService , private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
    Observable<boolean>
    | Promise<boolean>
    | boolean {
return this.authService.isLogin().then((isLogin) => {
  if(isLogin){
    return true;
  }
  this.router.navigate([
    {
      outlets: {
        without_header_and_footer: ['']
      }
    }
  ]);
});
  }

  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot):
    Observable<boolean>
    | Promise<boolean>
    | boolean {
    return this.canActivate(childRoute , state);
  }
}

guest-guard.service.ts

export class GuestGuardService implements CanActivate , CanActivateChild{
  constructor(private authService: AuthService , private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: 
RouterStateSnapshot):
    Observable<boolean>
    | Promise<boolean>
    | boolean {
return this.authService.isLogin().then((isLogin) => {
  if(!isLogin){
    return true;
  }
  this.router.navigate([
    {
      outlets: {
        admin_panel: ['home']
      }
    }
  ]);
});
  }

  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot):
Observable<boolean>
| Promise<boolean>
| boolean {
return this.canActivate(childRoute , state);
  }
}

authService переменные, которые вводятся в конструкторы этих двух классов, берутся изКласс AuthService, как показано ниже:

auth.service.ts

export class AuthService {
  loggedIn: boolean = false;
  constructor() { }

  isLogin(){
const promise = new Promise((resolve , reject) => {
  setInterval(() => {
    return resolve(this.loggedIn);
  } , 1000);
});
return promise;
  }

  login(){
    this.loggedIn = true;
  }

  logout(): void{
    this.loggedIn = false;
  }
}

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import {AppRouting} from './app-routing';
import { HomeComponent } from './components/home/home.component';
import {AuthGuardService} from "./services/auth/auth-guard.service";
import {GuestGuardService} from "./services/auth/guest-guard.service";
import {AuthService} from "./services/auth/auth.service";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    AppRouting
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [
    AuthGuardService,
    GuestGuardService,
    AuthService
  ],
  bootstrap: [AppComponent]
})
 export class AppModule { }

app-routing.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from './components/login/login.component';
import {HomeComponent} from "./components/home/home.component";
import {AuthGuardService} from "./services/auth/auth-guard.service";
import {GuestGuardService} from "./services/auth/guest-guard.service";

const appRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: LoginComponent ,
    outlet: 'without_header_and_footer',
    canActivate: [GuestGuardService],
  },
  {
    path: 'home',
    component: HomeComponent,
    outlet: 'admin_panel',
    canActivate: [AuthGuardService]
  }
];

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

И, наконец, мои маршруты такие, как показано ниже:

const appRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: LoginComponent ,
    outlet: 'without_header_and_footer',
    canActivate: [GuestGuardService],
  },
  {
    path: 'home',
    component: HomeComponent,
    outlet: 'admin_panel',
    canActivate: [AuthGuardService]
  }
];

Кажется, все правильно.Но когда я хочу перейти к маршруту /home ниже, в консоли были показаны ошибки:

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home' Error: Cannot match any routes. URL Segment: 'home'

Answer 1

Измените свой файл aap.routing.ts на:

import {LoginComponent} from './components/login/login.component';
import {HomeComponent} from "./components/home/home.component";
import {AuthGuardService} from "./services/auth/auth-guard.service";
import {GuestGuardService} from "./services/auth/guest-guard.service";

export const appRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: LoginComponent ,
    outlet: 'without_header_and_footer',
    canActivate: [GuestGuardService],
  },
  {
    path: 'home',
    component: HomeComponent,
    outlet: 'admin_panel',
    canActivate: [AuthGuardService]
  }
];

, а затем в приложении app.module.ts импортируйте файл, например, так:

import { appRoutes } from './app.routing.ts'

и замените импортмассив до:

imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes)
  ]