/2로 라우팅 할 때 각도 2가 "찾을 수 없음"을 표시합니다.

Question

각도 개발을 처음 사용하고 응용 프로그램에 경로를 추가하려고 시도하지만 일부 경로에서는 정상적으로 작동하지만 잘 모르는 경로에서는 작동하지 않습니다. 내 경로 코딩 예에서 무엇이 잘못 되었나요? /events 경로가 작동 할 때 events/:id 경로도 작동하지만이 경로가 /test 일 때 작동하지 않습니다. 여기

내 파일과 코드가

앱 component.js

import { Component } from '@angular/core' 
@Component({ 
    selector: 'event-app', 
    template: ` 
     <navbar></navbar> 
     <router-outlet></router-outlet> 
    `}) 
export class EventAppComponent{ } 

test.component.ts

import { Component } from '@angular/core' 
@Component({ 
    template: `<h1>Hello from testing component</h1>` 
}) 
export class TestComponent{ } 

routes.ts

import { Routes } from '@angular/router' 
import { EventListComponent } from './events/events-list.component' 
import { EventDetailComponent } from './events/event-details/event-detail.component' 
import { CreateEventComponent } from './events/event-create.component' 
import { Error404Component } from './error/404.component' 
import { EventRouteActivator } from './events/events-route.activator.service' 
import { EventsListResolverService } from './events/events-list.resolver.service' 
import { TestComponent } from './test/test.component' 

export const AppRoutes: Routes = [ 
    { path: 'events/new', component: CreateEventComponent }, 
    { path: '404', component: Error404Component }, 
    { path: 'test', component: TestComponent }, 
    { path: 'events', component: EventListComponent, resolve: {events: EventsListResolverService} }, 
    { path: 'events/:id', component: EventDetailComponent, 
     canActivate:[EventRouteActivator] }, 
    { path: '', redirectTo: '/events', pathMatch: 'full' }, 
] 

을 제안 나에게주세요입니다

app-module.ts

import { NgModule } from '@angular/core' 
import { BrowserModule } from '@angular/platform-browser' 
import { RouterModule } from '@angular/router' 
import { EventAppComponent } from './app.component' 
import { EventListComponent } from './events/events-list.component' 
import { EventListThumbnailComponent } from './events/events-list.thumbnail.component' 
import { EventDetailComponent } from './events/event-details/event-detail.component' 
import { NavbarComponent } from './nav/navbar.component' 
import { EventService } from './events/events-service' 
import { ToastrService } from './common/toastr.service' 
import { CreateEventComponent } from './events/event-create.component' 
import { Error404Component } from './error/404.component' 
import { EventRouteActivator } from './events/events-route.activator.service' 
import { EventsListResolverService } from './events/events-list.resolver.service' 
import { TestComponent } from './test/test.component' 
import { AppRoutes } from './routs' 

@NgModule({ 

    imports : [ 
     BrowserModule, 
     RouterModule.forRoot(AppRoutes, 
      { enableTracing: true }) 
    ], 
    declarations: [ 
     EventAppComponent, 
     EventListComponent, 
     EventListThumbnailComponent, 
     EventDetailComponent, 
     NavbarComponent, 
     CreateEventComponent, 
     Error404Component, 
     TestComponent 
    ], 
    providers: [ 
     EventService, 
     ToastrService, 
     EventRouteActivator, 
     EventsListResolverService 
    ], 
    bootstrap: [ EventAppComponent ] 

}) 
export class AppModule{ } 

Answer 1

테스트 모듈에 대한 작업 탐색을 통해 Plunker을 만들었습니다. 문제는 탐색에서 절대 경로가 아닌 관계 경로를 사용한다는 것입니다. 더 나은 이해를 위해서 Angular routing documentation을 확인하십시오.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <button routerLink="/test">Navigate to test</button> 
    </div> 
    <router-outlet></router-outlet> 
    `, 
}) 
export class App { 
    name:string; 

    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, FormsModule, RouterModule.forRoot(AppRoutes, 
      { enableTracing: true }) ], 
    declarations: [ App, TestComponent ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}