[英]Error: Cannot match any routes. URL Segment: in angular9
i use angular9+ version,I give all paths in my router module but i get this type of error core.js:6228 ERROR Error: Uncaught (in promise): Error: Cannot match any routes.
我使用 angular9+ 版本,我在我的路由器模块中提供了所有路径,但我得到了这种类型的错误 core.js:6228 错误错误:未捕获(承诺):错误:无法匹配任何路由。 URL Segment: 'mystore.component' Error: Cannot match any routes.
URL 段:“mystore.component”错误:无法匹配任何路由。 URL Segment: 'mystore.component' at ApplyRedirects.noMatchError (router.js:4396) at CatchSubscriber.selector (router.js:4360) at CatchSubscriber.error (catchError.js:29) at MapSubscriber._error (Subscriber.js:75) at MapSubscriber.error (Subscriber.js:55) at MapSubscriber._error (Subscriber.js:75) at MapSubscriber.error (Subscriber.js:55) at MapSubscriber._error (Subscriber.js:75) at MapSubscriber.error (Subscriber.js:55) at ThrowIfEmptySubscriber._error (Subscriber.js:75) at resolvePromise (zone-evergreen.js:798) at resolvePromise (zone-evergreen.js:750) at zone-evergreen.js:860 at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41632) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at drainMicroTaskQueue (zone-evergreen.js:569) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
URL 段:'mystore.component' at ApplyRedirects.noMatchError (router.js:4396) at CatchSubscriber.selector (router.js:4360) at CatchSubscriber.error (catchError.js:29) at MapSubscriber._error (Subscriber.js: 75) 在 MapSubscriber.error (Subscriber.js:55) 在 MapSubscriber._error (Subscriber.js:75) 在 MapSubscriber.error (Subscriber.js:55) 在 MapSubscriber._error (Subscriber.js:75) 在 MapSubscriber.error (Subscriber.js:55) 在 ThrowIfEmptySubscriber._error (Subscriber.js:75) 在 resolvePromise (zone-evergreen.js:798) 在 resolvePromise (zone-evergreen.js:750) 在 zone-evergreen.js:860 在 ZoneDelegate .invokeTask (zone-evergreen.js:399) 在 Object.onInvokeTask (core.js:41632) 在 ZoneDelegate.invokeTask (zone-evergreen.js:398) 在 Zone.runTask (zone-evergreen.js:167) 在 drainMicroTaskQueue (zone-evergreen.js:569) 在 ZoneTask.invokeTask [作为调用] (zone-evergreen.js:484)
mystore.component.html
mystore.component.html
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
menu.component.html
menu.component.html
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class=" nav-link" routerLink="/mystore.component" routerLinkActive="active">MyStore</a>
</li>
<li class="nav-item">
<a class=" nav-link" routerLink="/admin.component" routerLinkActive="active">Admin</a>
</li>
<li class="nav-item">
<a class=" nav-link" routerLink="/users.component" routerLinkActive="active">User</a>
</li>
<li class="nav-item">
<div class="dropdown">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
Product
</button>
<div class="dropdown-menu">
<a class="dropdown-item" routerLink="#">Grosery</a>
<a class="dropdown-item" routerLink="#">Vegetable</a>
<a class="dropdown-item" routerLink="#">Cusmatic</a>
</div>
</div>
</li>
</ul>
</nav>
app.routeing.ts
应用程序.路由.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { UsersComponent } from './users/users.component';
import { MystoreComponent } from './mystore/mystore.component';
const routes: Routes = [
{ path: '', redirectTo:'mystore',pathMatch: 'full'},
{ path: 'admin.component', component: AdminComponent },
{ path: 'users.component', component: UsersComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
You're redirecting to mystore
and yet there isn't any mystore
path defined.您正在重定向到
mystore
,但没有定义任何mystore
路径。 Also in the component template you're referring it to as mystore.component
instead.同样在组件模板中,您将其称为
mystore.component
。 You need to settle on a single path name.您需要确定一个路径名。 Try the following
尝试以下
const routes: Routes = [
{ path: '', redirectTo:'mystore.component', pathMatch: 'full'},
{ path: 'admin.component', component: AdminComponent },
{ path: 'users.component', component: UsersComponent },
{ path: 'mystore.component', component: UsersComponent }
];
it ever happened to me once.它曾经发生在我身上。 i hava dig down to this forum to see the answer but i have no luck.
我已经深入到这个论坛来查看答案,但我没有运气。
in my case, i can't bind any routerLink to event handler but if i write down the desired path to url i can access it.就我而言,我无法将任何 routerLink 绑定到事件处理程序,但如果我写下 url 的所需路径,我可以访问它。
example例子
localhost:4200/dashboard
since i see your proj is not that complicated yet, i advise you to generate the new one!因为我看到你的项目还没有那么复杂,我建议你生成一个新的!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.