Angular 2 경로가 존재하지 않는 경우 404 또는 다른 경로로 리디렉션하는 방법

Angular 2 경로가 존재하지 않는 경우 404 또는 다른 경로로 리디렉션하는 방법

---

이 질문에 이미 답변이 있습니다.

• Angular2로 404 처리 1 답변

/경로가 각도 2에없는 경우 404 다른 경로 를 리디렉션하려고했습니다.

각도 1에 대한 몇 가지 방법이 있지만 각도 2가 아닌 연구를 시도했습니다.

내 코드는 다음과 같습니다.

@RouteConfig([
{
    path: '/news',
    name: 'HackerList',
    component: HackerListComponent,
    useAsDefault: true
},
{
    path: '/news/page/:page',
    name: 'TopStoriesPage',
    component: HackerListComponent
},
{
    path: '/comments/:id',
    name: 'CommentPage',
    component: HackerCommentComponent
}
])

예를 들어 리디렉션 /news/page/하면 작동하고 빈 페이지가 반환됩니다. 이런 종류의 경우 어떻게 처리합니까?

---

버전 v2.2.2 이상

버전 v2.2.2 이상 에서는 이름 속성이 더 이상 존재하지 않으며 경로를 정의하는 데 사용해서는 안됩니다. 경로 대신 사용해야 이름 과 선두에 슬래시가 경로에 필요하지 않습니다. 이 경우 다음 path: '404'대신 사용하십시오 path: '/404'.

 {path: '404', component: NotFoundComponent},
 {path: '**', redirectTo: '/404'}

v2.2.2 이전 버전

다음을 사용할 수 있습니다 {path: '/*path', redirectTo: ['redirectPathName']}.

{path: '/home/...', name: 'Home', component: HomeComponent}
{path: '/', redirectTo: ['Home']},
{path: '/user/...', name: 'User', component: UserComponent},
{path: '/404', name: 'NotFound', component: NotFoundComponent},

{path: '/*path', redirectTo: ['NotFound']}

어떤 경로 일치는 리디렉션하지 않는 경우 NotFound경로

---

Angular가 릴리스를 진행하면서 동일한 문제에 직면했습니다. 버전 2.1.0에 따라 Route인터페이스는 다음과 같습니다.

export interface Route {
    path?: string;
    pathMatch?: string;
    component?: Type<any>;
    redirectTo?: string;
    outlet?: string;
    canActivate?: any[];
    canActivateChild?: any[];
    canDeactivate?: any[];
    canLoad?: any[];
    data?: Data;
    resolve?: ResolveData;
    children?: Route[];
    loadChildren?: LoadChildren;
} 

그래서 내 솔루션은 다음과 같습니다.

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '404', component: NotFoundComponent },
    { path: '**', redirectTo: '404' }
];

---

My preferred option on 2.0.0 and up is to create a 404 route and also allow a ** route path to resolve to the same component. This allows you to log and display more information about the invalid route rather than a plain redirect which can act to hide the error.

Simple 404 example:

{ path '/', component: HomeComponent },
// All your other routes should come first    
{ path: '404', component: NotFoundComponent },
{ path: '**', component: NotFoundComponent }

To display the incorrect route information add in import to router within NotFoundComponent:

import { Router } from '@angular/router';

Add it to the constructior of NotFoundComponent:

constructor(public router: Router) { }

Then you're ready to reference it from your HTML template e.g.

The page <span style="font-style: italic">{{router.url}}</span> was not found.

---

As shaishab roy says, in the cheat sheet you can find the answer.

But in his answer, the given response was :

{path: '/home/...', name: 'Home', component: HomeComponent}
{path: '/', redirectTo: ['Home']},
{path: '/user/...', name: 'User', component: UserComponent},
{path: '/404', name: 'NotFound', component: NotFoundComponent},

{path: '/*path', redirectTo: ['NotFound']}

For some reasons, it doesn't works on my side, so I tried instead :

{path: '/**', redirectTo: ['NotFound']}

and it works. Be careful and don't forget that you need to put it at the end, or else you will often have the 404 error page ;).

---

make sure ,use this 404 route wrote on the bottom of the code.

syntax will be like

{
    path: 'page-not-found', 
    component: PagenotfoundComponent
},
{
    path: '**', 
    redirectTo: '/page-not-found'
},

Thank you

참고URL : https://stackoverflow.com/questions/36260839/angular-2-how-to-redirect-to-404-or-other-path-if-the-path-does-not-exist