오류 : 잡히지 않음 (약속에서) : 오류 : 어떤 경로도 일치 할 수 없습니다 Angular 2

오류 : 잡히지 않음 (약속에서) : 오류 : 어떤 경로도 일치 할 수 없습니다 Angular 2

---

오류

내 앱에서 중첩 라우팅을 구현했습니다. 응용 프로그램이 로그인 후 로그인 화면을로드 할 때 사용자, 제품, API 등과 같은 추가 하위 경로가있는 관리자 페이지로 리디렉션됩니다. 이제 관리자로 이동할 때 기본적으로 사용자 화면을로드하지만 더 <routeLinks>이상 작동하지 않고이 오류가 표시됩니다.Error: Uncaught (in promise): Error: Cannot match any routes: 'product'

제품을 클릭하면 다음이 표시됩니다.

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

---

나는 당신의 실수 경로가되어야한다는 것을 생각 product대신 /product.

그래서 더 많은 것

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

---

나를 위해 그것은 아래 코드처럼 작동했습니다. RouterModule.forRoot와 사이에 차이를 만들었습니다 RouterModule.forChild. 그런 다음 자식에서 부모 경로를 정의하고 자식 배열에서 자식을 정의합니다.

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

도움이 되었기를 바랍니다.

---

나는 각도 4를 사용하고 있으며 동일한 문제가 적용되고 가능한 모든 해결책에 직면했지만 마침내 이것은 내 문제를 해결합니다.

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

이것이 당신을 도울 것입니다.

---

라우팅 모듈에 대한 가져 오기가 자식 모듈 뒤에 와야한다는 문제가 있었는데,이 게시물과 직접 관련이 없을 수도 있지만 이것을 읽으면 도움이되었을 것입니다.

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

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

---

내 경로 배열 끝에 와일드 카드 경로를 사용해야했습니다.

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

그리고 오류가 해결되었습니다.

---

AngularJS 응용 프로그램을 수행하는 동안 동일한 오류가 발생했습니다. 터미널에서 오류가 표시되지 않았지만 Google 개발자 도구로 디버깅 할 때이 오류가 발생했습니다 .

이 오류가 발생한 후 로컬 호스트 / 로그인을 요청하는 동안 아무것도 표시되지 않았기 때문에 먼저 라우팅 모듈을 검토했습니다.

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!

---

If your passing id, then try to follow this method

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

---

If you are passing id through url please use below

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

---

As for me resetConfig only works

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 **

---

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

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

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

Ng4LoadingSpinnerModule.forRoot()

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

---

내 경우에는 iframe바운드 src가있는 호스트 / 널을 얻으려고했습니다 (바운드 변수의 값이 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자식 라우팅 경로 가 없으며 in routerLink또는 nsRouterLink다음과 같아야합니다.routerLink="/pages/about"

나는 그들이 누군가를 돕기를 바랍니다.

---

이제 각도 8의 누군가에게 발생하면 경로 앞에 '/'를 추가하여 오류를 제거했으며 필요에 따라 작동했습니다.

참고 URL : https://stackoverflow.com/questions/38093654/error-uncaught-in-promise-error-cannot-match-any-routes-angular-2