未捕获（承诺）：错误：无法匹配任何路由。 URL 段：Angular 中的“布局”答案

【问题标题】：Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'layout' in Angular未捕获（承诺）：错误：无法匹配任何路由。 URL 段：Angular 中的“布局”
【发布时间】：2018-04-02 16:15:40
【问题描述】：

我正在使用用户名和密码 admin 和 admin 进行正常登录。在登录组件中导航到布局。但我收到类似“core.js:1448 ERROR Error: Uncaught (in promise): Error: Cannot match”之类的错误任何路线。URL 段：'layout'"。请帮助我..

app.routing.module.ts

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


@NgModule({
    imports: [
        RouterModule.forRoot([
            {path: '', redirectTo: '/login', pathMatch: 'full'},
            {path: 'login', loadChildren: 'app/login/login.module#LoginModule'}

        ])
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule {
}

我的 login.component.ts 是

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AuthenticationService } from '../../services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  username:string;
  password:string;

  constructor(

    public authService: AuthenticationService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit() {

  }

  login(){
    if(this.authService.login(this.username, this.password)){
      this.router.navigate(['/layout']);
    }
  }
}

我的 login.routing.module.ts 是

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { LayoutComponent } from '../layout/layout/layout.component';
import { LayoutRoutingModule } from '../layout/layout-routing.module';

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'layout', component: LayoutComponent }




];
@NgModule({
imports: [RouterModule.forChild(routes)],

  exports: [RouterModule]
})
export class LoginRoutingModule { }

【问题讨论】：

您正在导航到布局路线但尚未定义。
布局路由是登录路由的子路由。它的路径是/login/layout。

标签： angular angular-ui-router

【解决方案1】：

扩展 JB Nizet 在您的评论中所说的内容，当您有一个延迟加载的模块时，该延迟加载模块内部的路径是相对的。如果在延迟加载之前有任何路径，则该路径将预先添加到延迟加载模块中的所有路径。

所以在这种情况下，您的路径映射如下：

路径：''
加载的组件：LoginComponent
为什么：重定向到“/登录”。请参阅下面的登录以获取更多信息。

路径：'/登录'
加载的组件：LoginComponent
为什么：lazy 加载 LoginModule，其中 is 匹配 '' 的路径，从而加载 LoginComponent

路径：'/登录/布局'
加载的组件：LayoutComponent
为什么：lazy 加载 LoginModule，其中 is 匹配 'layout' 的路径，从而加载 LayoutComponent

路径：'/布局'
加载的组件：无
为什么：因为它没有以'login'开头，它不会延迟加载LoginModule，因此只是在app.routing中查找，其中唯一有效的路径是''和'/login'

【讨论】：

【解决方案2】：

在我尝试实现延迟加载后，我遇到了这个问题。

创建 SpecificModule.routing.module.ts 文件

const 路线：路线 = [ { 路径：“”，组件：AComponent，canActivate：[AuthGuard]}， { 路径：“newmessage”，组件：BComponent，canActivate：[AuthGuard]，}， { 路径：“editmessage/:MessageId/:Mode”，组件：NewmessageComponent，canActivate：[AuthGuard] }， ];

@NgModule({ 进口：[RouterModule.forChild(routes)]，出口：[路由器模块] })
将 SpecificModuleRoutingModule 导入到 SpecificModule
将 SpecificModuleRouting 的条目添加到 AppRoutingModule。

从“@angular/core”导入{ NgModule }；从“@angular/router”导入{路由，RouterModule}；从“./shared/services/auth.guard”导入{ AuthGuard}；

const 路线：路线 = [ { path: "specificmodule", loadChildren: () => import("./specificmodule/specificmodule.module").then(d => d.SpecificModule), canActivate: [AuthGuard] }, ];

@NgModule({ 进口：[RouterModule.forRoot(routes)]，出口：[路由器模块] }) 导出类 AppRoutingModule {}
将 SpecificModule 导入到 AppModule [这是导致问题的缺失]

【讨论】：