Angular 延迟加载功能模块中的问题

从AppModule full component，我试图在我的功能模块中加载一个名为Authentication的登录组件。我正在尝试延迟加载功能模块。但我在控制台中遇到了一个错误

错误错误：未捕获（承诺中）：错误：无法匹配任何路由。URL段：“身份验证/登录” 错误：无法匹配任何路由。URL段：“身份验证/登录”

项目结构：

app-routing.module.ts

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

import { FullComponent } from './layouts/full/full.component';


export const routes: Routes = [
  {
      path: '',
      component: FullComponent,
      children: [
          { path: '', redirectTo: '/authentication/login', pathMatch: 'full' }
      ]
  },
  {
      path: '**',
      redirectTo: '404'
  }];

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';

import { AuthenticationRoutes } from './authentication.routing';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(AuthenticationRoutes)
  ]
})
export class AuthenticationModule { }

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

import { FullComponent } from './layouts/full/full.component';


export const routes: Routes = [
  {
    path: '',
    redirectTo: 'authentication/login', // Start Page
    pathMatch: 'full', // Match the full path
  },
  {
    path: '',
    component: FullComponent,
    children: FullComponent_ROUTES
  },
  {
      path: '**',
      redirectTo: '404'
  }];

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

Full.component.html

<div id="main-wrapper" [ngClass]="
    {
        'defaultdark': color == 'defaultdark',
        'greendark': color == 'greendark',
        'reddark': color == 'reddark',
        'bluedark': color == 'bluedark',
        'purpledark': color == 'purpledark',
        'megnadark': color == 'megnadark',
        'default': color == 'default',
        'green': color == 'green',
        'red': color == 'red',
        'blue': color == 'blue',
        'purple': color == 'purple',
        'megna': color == 'megna',
        'mini-sidebar': showMinisidebar,
        'dark-theme': showDarktheme
    }
">

    <!--app-navigation></app-navigation-->

    <aside class="left-sidebar">
        <div class="scroll-sidebar">
            <!--app-sidebar></app-sidebar-->
        </div>
    </aside>

    <div class="page-wrapper">

        <div class="container-fluid">
            <!--app-breadcrumb></app-breadcrumb-->
            <router-outlet></router-outlet>
        </div>
    </div>

</div>

authentication.module.ts

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

import { FullComponent } from './layouts/full/full.component';


export const routes: Routes = [
  {
      path: '',
      component: FullComponent,
      children: [
          { path: '', redirectTo: '/authentication/login', pathMatch: 'full' }
      ]
  },
  {
      path: '**',
      redirectTo: '404'
  }];

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';

import { AuthenticationRoutes } from './authentication.routing';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(AuthenticationRoutes)
  ]
})
export class AuthenticationModule { }

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

import { FullComponent } from './layouts/full/full.component';


export const routes: Routes = [
  {
    path: '',
    redirectTo: 'authentication/login', // Start Page
    pathMatch: 'full', // Match the full path
  },
  {
    path: '',
    component: FullComponent,
    children: FullComponent_ROUTES
  },
  {
      path: '**',
      redirectTo: '404'
  }];

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

---

没有“/authentication/login”的路径

试试这样的

app-routing.module.ts

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

import { FullComponent } from './layouts/full/full.component';


export const routes: Routes = [
  {
      path: '',
      component: FullComponent,
      children: [
          { path: '', redirectTo: '/authentication/login', pathMatch: 'full' }
      ]
  },
  {
      path: '**',
      redirectTo: '404'
  }];

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';

import { AuthenticationRoutes } from './authentication.routing';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(AuthenticationRoutes)
  ]
})
export class AuthenticationModule { }

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

import { FullComponent } from './layouts/full/full.component';


export const routes: Routes = [
  {
    path: '',
    redirectTo: 'authentication/login', // Start Page
    pathMatch: 'full', // Match the full path
  },
  {
    path: '',
    component: FullComponent,
    children: FullComponent_ROUTES
  },
  {
      path: '**',
      redirectTo: '404'
  }];

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

FullComponent_ROUTES：（例如，可以位于共享文件夹中）

请注意，如果您使用的是较新版本的angular，则延迟加载的方式会有所不同

登录模块也可以有一个路由模块

const routes: Routes = [
 {
    path: '', // authentication
    children: [
    {
      path: 'login',
      component: LoginComponent
    }
}

---

或者简化整个事情

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

import { FullComponent } from './layouts/full/full.component';


export const routes: Routes = [
  {
    path: 'auth',
    component: LoginComponent <=== Make this a top level component
  },
  {
    path: '',
    redirectTo: 'home', // Start Page
    pathMatch: 'full', // Match the full path
  },
  {
    path: '',
    component: FullComponent,
    children: FullComponent_ROUTES,
    canActivate: [AuthGuard] <=== this can handle protecting paths if they are not logged in
  },
  {
      path: '**',
      redirectTo: '404'
  }];

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

从'@angular/core'导入{NgModule}；
从'@angular/router'导入{Routes，RouterModule}；
从“./layouts/full/full.component”导入{FullComponent}；
导出常量路由：路由=[
{
路径：“auth”，
component:LoginComponent我在你的代码中没有看到任何路由
/authentication/login
，我所能看到的只是
/login
，我想你可以用
{path:''，redirectTo:'/login'，pathMatch:'full'替换它来解决这个问题
同样的问题也会出现。但是在将“/authentication/login”替换为“authentication/login”后，控制台错误消失了。我仍然看不到加载的登录组件。正如我所说，代码中没有路由
'authentication/login'