错误：未捕获（在承诺中）：错误：无法匹配任何路径Angular 2

Error

I am implemented nested routing in my app. when application loads its shows login screen after login its redirect to admin page where further child routes exist like user, product, api etc. now when I navigate to admin it byddefault loads user screen but further <routeLinks> not working and its shows this error. Error: Uncaught (in promise): Error: Cannot match any routes: 'product'

我在我的应用程序中实现了嵌套路由。当应用程序在登录后加载其显示登录屏幕时，它会重定向到管理页面，其中存在更多子路由，如user，product，api等。现在当我导航到admin时，byddefault加载用户屏幕但是进一步 不工作，它显示此错误。错误：未捕获（承诺）：错误：无法匹配任何路线：'产品'

After Click Product it shows this

点击产品后，它显示了这一点

Code main.ts

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]);

app.component

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

app.routes

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)
];

home.component

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

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

about.component

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

8 个解决方案

#1

I think that your mistake is in that your route should be product instead of /product.

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

So more something like

更像是这样的东西

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

#2

For me it worked like the code below. I made a difference between RouterModule.forRoot and RouterModule.forChild. Then in the child define the parent path and in the children array the childs.

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

parent-routing.module.ts

家长routing.module.ts

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,
      },
    ]
  }
])

Hope this helps.

希望这可以帮助。

#3

I am using angular 4 and faced the same issue apply, all possible solution but finally, this solve my problem

我使用角4并面临同样的问题申请，所有可能的解决方案，但最后，这解决了我的问题

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

Hope this will help you.

希望这会帮助你。

#4

I was having the same error while I was doing AngularJS application. I did not see any error from my terminal but when I debug with google developer tool, I have got this error.

我在做AngularJS应用程序时遇到了同样的错误。我没有看到我的终端有任何错误，但是当我使用谷歌开发者工具调试时，我遇到了这个错误。

After having this error, I reviewed my routing module first , since I was not seeing anything while requesting local host /login.

出现此错误后，我首先查看了我的路由模块，因为在请求本地主机/登录时我没有看到任何内容。

I found out that I misspelled the login as lgin and when I correct it works fine. I am just sharing this just to pay attention for any typo error we might encounter with put us in a great time loose!

我发现我将登录拼错为lgin，当我纠正它时工作正常。我只是分享这个只是为了注意我们可能遇到的任何拼写错误，让我们放松一下！

#5

I also had the same issue. Tried all ways and it didn't work out until I added the following in app.module.ts

我也有同样的问题。尝试了各种方法，直到我在app.module.ts中添加以下内容后才能解决问题

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

And add the following in your imports in app.module.ts

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

Ng4LoadingSpinnerModule.forRoot()

This case might be rare but I hope this helps someone out there

这种情况可能很少见，但我希望这有助于那里的人

#6

If you are passing id through url please use below

如果您通过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' }
    ]),
  ],

i.e If you are passing any id we need to both url edit with id and edit url alone

即如果你传递任何id，我们需要使用id编辑url并单独编辑url

#7

I had to use a wildcard route at the end of my routes array.

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

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

{路径：'**'，redirectTo：'home'}

And the error was resolved.

错误得到了解决。

#8

As for me resetConfig only works

至于我，resetConfig只能工作

this.router.resetConfig(newRoutes);

Or concat with previous

或者与之前相关联

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

But keep in mind that the last must be always route with path **

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