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

Question

我从AppModule完整组件中尝试将登录组件加载到名为Authentication的功能模块中。我正在尝试延迟加载功能模块。但是我在控制台中遇到错误。

错误错误：未捕获（承诺）：错误：无法匹配任何路由。 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 { }

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.routing.ts

import { Routes } from '@angular/router';

import { LoginComponent } from './login/login.component';
/*import { Login2Component } from './login2/login2.component';
import { SignupComponent } from './signup/signup.component';
import { Signup2Component } from './signup2/signup2.component';*/

export const AuthenticationRoutes: Routes = [
  {
    path: '',
    children: [
        {
            path: 'login',
            component: LoginComponent
        }
    ]
  }
];

authentication.module.ts

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 { }

Answer 1

没有用于'/ 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: '',
    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 ：（例如可以在共享文件夹中）

import { Routes } from '@angular/router';

export const FullComponent_ROUTES: Routes = [
  {
    path: 'authentication',
    loadChildren: 'path/to/module/login.module#LoginModule' // Lazy load
  }
];

请注意，如果您使用的是更新版本的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 { }