错误：无法匹配任何路由。网址段：

Posted 2023-02-22

【中文标题】错误：无法匹配任何路由。网址段：

【英文标题】：Error: Cannot match any routes. URL Segment:

【发布时间】：2017-08-10 04:08:12

【问题描述】：

我正在尝试按照本教程 http://onehungrymind.com/named-router-outlets-in-angular-2/ 进行操作，但出现错误。

异常：未捕获（承诺中）：错误：无法匹配任何路由。网址 段：“客户” “客户”

这是我的Router module

import NgModule from "@angular/core";
import Routes, RouterModule from "@angular/router";
import AppComponent from "./app.component";
import ClientComponent from "./clients/client.component";
import ClientDetailsComponent from "./clients/client-details/client-details.component";
import ClientListComponent from "./clients/client-list/client-list.component";

const routes: Routes = [
    path: '', component: AppComponent,
    path: 'clients', component: ClientComponent, children: [
        path: 'list', component: ClientListComponent, outlet: 'client-list',
        path: ':id', component: ClientDetailsComponent, outlet: 'client-details'
    ]
    ,
];

@NgModule(
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []
)
export class RoutingModule 

App.component

export class AppComponent 
    clientsLoaded = false;

    constructor(private clientService: ClientService,
                private router: Router) 
    

    loadClientsComponent() 
        this.router.navigate(['/clients', outlets: 'client-list': ['clients'], 'client-details': ['none'], 'client-accounts-info': ['none']]);
        this.clientsLoaded = true;
    

客户端组件

import Component from "@angular/core";
import ClientService from "../services/client.service";
import Router from "@angular/router";
import Client from "./client-details/model/client.model";
@Component(
    selector: 'clients',
    templateUrl: 'app/clients/client.component.html'
)
export class ClientComponent 
    clients: Array<Client> = [];

    constructor(private clientService: ClientService,
                private router: Router) 
    
    ngOnInit() 
        this.getClients().subscribe((clients) => 
            this.clients = clients;
        );
    

    getClients() 
        return this.clientService.getClients();
    

有什么问题吗？如果有任何帮助，我将不胜感激

更新

感谢您的建议，我已经尝试过类似的方法

const routes: Routes = [
    path: '', component: AppComponent, pathMatch: 'full',
    path: 'clients', component: ClientComponent, children: [
        path: '', component: ClientComponent,
        path: 'list', component: ClientListComponent, outlet: 'client-list',
        path: ':id', component: ClientDetailsComponent, outlet: 'client-details'
    ]
    ,
];

但还是不行。

也许我做错了，但我的ClientComponent 有以下模板

<div id="sidebar" class="col-sm-3 client-sidebar">
    <h2 class="sidebar__header">
        Client list
    </h2>
    <div class="sidebar__list">
        <router-outlet name="client-list"></router-outlet>
    </div>
</div>
<div id="client-info" class="col-sm-4 client-info">
    <div class="client-info__section client-info__section--general">
        <router-outlet name="client-details"></router-outlet>
    </div>
</div>

所以我希望我的客户端组件保留所有与客户端相关的组件。例如，如果用户单击一个按钮，则会加载一个客户端列表。

【问题讨论】：

看我的回答***.com/a/49962630/5279156

【参考方案1】：

添加pathMatch: 'full'

path: '', component: AppComponent, pathMatch: 'full',

到具有空路径 '' 且没有子路由的路由。

【讨论】：

感谢您的回答，但不幸的是，这也不起作用。还有什么可能导致问题？

/clients 不是有效路由。您需要 /clients/list 或 /clients/someid 或将默认路由 path: '' 添加到 /clients 的子级并重定向到 list

非常感谢，但这仍然不起作用，我刚刚更新了我的问题，请看一下。

我不熟悉命名的网点。 AFAIK 你仍然需要一个未命名的插座（命名的插座只能用于未命名的插座 - 我记得一些讨论说这个限制可能会被删除，但我不记得看到任何实际发生的事情。我建议你先尝试完全命名的网点，当这工作时，添加命名的网点作为下一步。

谢谢，我会尝试，请将您的 cmets 添加到答案中，我认为它们可能对其他人有帮助

【参考方案2】：

我正在将 Angular 2/4 集成到现有的 MVC 应用程序中，我也遇到了这个问题。

使用您的示例，如果我在路由配置中使用 path: 'Clients' 而不是 path: 'clients' 并尝试转到诸如 http://localhost/clients 之类的 URL，我会收到此错误。

路由路径名是区分大小写的（无论如何现在都是）。否则它们将与您的 URL 中的内容不匹配，并且使用典型的 MVC 控制器/动作命名，它们是“InitialCaps 样式”。

【参考方案3】：

检查 app.module.ts 中的导入会话，看看您没有错过路由：

imports: [
    BrowserModule,
    APP_ROUTES,
    AppRoutingModule
  ],

【参考方案4】：

我遇到了同样的问题，我的路径是正确的。 最后清理 ClientApp\dist 文件夹解决了这个问题。