错误: 未捕获(在承诺) : 错误: 无法匹配任何路线角2

错误 我已经在我的应用程序中实现了嵌套路由。当应用程序加载它的显示登录屏幕登录后，它重定向到管理页面，其中进一步的子路由存在像用户，产品，应用程序接口等现在当我导航到管理它默认加载用户屏幕，但进一步的 <routeLinks>不工作，它显示这个错误。 Error: Uncaught (in promise): Error: Cannot match any routes: 'product'

enter image description here

单击“产品”后会显示以下内容 enter image description here

密码

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from '../app/app.routes';
import { AppComponent } from '../app/app.component';


bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

应用程序组件

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';


@Component({
selector: 'demo-app',
template: `


<div class="outer-outlet">
<router-outlet></router-outlet>
</div>
`,
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

应用，路线

import { provideRouter, RouterConfig } from '@angular/router';


import { AboutComponent, AboutHomeComponent, AboutItemComponent } from '../app/about.component';
import { HomeComponent } from '../app/home.component';


export const routes: RouterConfig = [
{
path: '',
component: HomeComponent
},
{
path: 'admin',
component: AboutComponent,
children: [
{
path: '',
component: AboutHomeComponent
},
{
path: '/product',
component: AboutItemComponent
}
]
}
];


export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];

家，组件

import { Component } from '@angular/core';


@Component({
selector: 'app-home',
templateUrl:'../app/layouts/login.html'
})
export class HomeComponent { }

大概，组成部分

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


@Component({
selector: 'about-home',
template: `<h3>user</h3>`
})
export class AboutHomeComponent { }


@Component({
selector: 'about-item',
template: `<h3>product</h3>`
})
export class AboutItemComponent { }


@Component({
selector: 'app-about',
templateUrl: '../app/layouts/admin.html',
directives: [ROUTER_DIRECTIVES]
})
export class AboutComponent { }
216642 次浏览
小开
最佳答案

我认为你的错误在于你的路线应该是 product而不是 /product。

所以更像是

  children: [
{
path: '',
component: AboutHomeComponent
},
{
path: 'product',
component: AboutItemComponent
}
]
小开

对我来说，它像下面的代码一样工作。我在 RouterModule.forRoot和 RouterModule.forChild之间做了改变。然后在子元素中定义父元素路径，在子元素数组中定义子元素。

父路由，模块

RouterModule.forRoot([
{
path: 'parent',  //parent path, define the component that you imported earlier..
component: ParentComponent,
}
]),
RouterModule.forChild([
{
path: 'parent', //parent path
children: [
{
path: '',
redirectTo: '/parent/childs', //full child path
pathMatch: 'full'
},
{
path: 'childs',
component: ParentChildsComponent,
},
]
}
])

希望这个能帮上忙。

小开

如果您正在通过 url 传递 id，请使用下面的命令

imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
{ path: 'Employees', component: EmployeesComponent, pathMatch: 'full' },
{ path: 'Add', component: EmployeeAddComponent, pathMatch: 'full' },
**{ path: 'Edit/:id', component: EmployeeEditComponent },
{ path: 'Edit', component: EmployeeEditComponent },**
{ path: '', redirectTo: 'Employees', pathMatch: 'full' }
]),
],

例如，如果您传递任何 id，我们需要同时使用 id 编辑网址和单独编辑网址

小开

我在处理 AngularJS 应用程序时也出现了同样的错误。我没有看到任何错误从我的终端 < img src = “ https://i.stack.imgur.com/ObwHy.png”alt = “汇编成功”> ，但当我调试与谷歌开发工具，我有这个错误 < img src = “ https://i.stack.imgur.com/aF0r8.png”alt = “ error message”> < img src = “ https://i.stack.imgur.com/aF0r8.png”alt = “ error message”> 。

出现这个错误之后，我首先检查了路由模块，因为在请求本地主机/登录时没有看到任何东西。

我发现我把登录名拼错为 lgin，当我纠正它时，它工作得很好。我只是分享这只是为了注意任何打字错误，我们可能会遇到把我们在一个伟大的时间松散！ after correcting the typo error

小开

我必须在路由数组的末尾使用通配符路由。

{ path: '**', redirectTo: 'home' }

错误得到了解决。

小开

我使用角4和面临同样的问题应用，所有可能的解决方案，但最终，这解决了我的问题

export class AppRoutingModule {
constructor(private router: Router) {
this.router.errorHandler = (error: any) => {
this.router.navigate(['404']); // or redirect to default route
}
}
}

希望这个能帮到你。

小开

对我来说，resetConfig只起作用

this.router.resetConfig(newRoutes);

或者与之前的联系

this.router.resetConfig([...newRoutes, ...this.router.config]);

但是请记住，最后一个必须始终是路径 **的路由

小开

我也有同样的问题。尝试了所有的方法，但都没有成功，直到我在 app.module.ts 中添加了以下内容

import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';

并在 app.module.ts 中的导入中添加以下内容

Ng4LoadingSpinnerModule.forRoot()

这种情况可能很少见，但我希望这能帮到其他人

小开

我有一个问题，路由模块的导入必须在子模块之后，这可能与本文没有直接关系，但如果我读到以下内容，它会对我有所帮助:

Https://angular.io/guide/router#module-import-order-matters

imports: [
BrowserModule,
FormsModule,
ChildModule,
AppRoutingModule
],
小开

如果要传递 id，请尝试遵循此方法

 const routes: Routes = [
{path:"", redirectTo:"/home", pathMatch:"full"},
{path:"home", component:HomeComponent},
{path:"add", component:AddComponent},
{path:"edit/:id", component:EditComponent},
{path:"show/:id", component:ShowComponent}
];
@NgModule({
imports: [


CommonModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule],
declarations: []
})
export class AppRoutingModule { }
小开

在我的例子中，带有绑定 src的 iframe尝试获得 host/null (当绑定变量的值为 null 时)。 添加一个 *ngIf会有所帮助。

我变了:

<iframe [src]="iframeSource"></iframe>

到

<iframe [src]="iframeSource" *ngIf="iframeSource"></iframe>
小开

这可能会有所帮助:

//I personally prefer dynamic import (angular 8)
{ path: 'pages', loadChildren: () => import('./pages/pages.module').then(mod => mod.PageModule) }

在子路由中，它应该类似于: { path: 'about', component: AboutComponent },

请注意，在子路由的路径中没有 pages，在 routerLink或 nsRouterLink中它应该看起来像 routerLink="/pages/about"

我希望这能帮到别人。

小开

对于我来说，将 AppRoutingModule 添加到我的导入解决了这个问题。

    imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot([
{
path: 'new-cmp',
component: NewCmpComponent
}
])
]
小开

我也有同样的问题，后来我意识到我的应用程序路由。Ts 在一个名为 app-routing 的子文件夹中。我将这个文件直接移动到 src 下，现在它正在工作。(现在应用程序路由文件可以访问所有组件)


提交答案