Angular 라우팅 적용하기

• @angular/core = “^5.0.1”

라우팅 기능을 통해서 페이지 이동을 구현하려고 하는데 생각보다 잘 안되서 무니서로 정리해 놓으려고 합니다.
Reference 문서를 살펴보면 가능은 하겠지만, 문서를 보면서 실수한 점에 대해서 기록

install routing module

$ ng generate module app-routing --flat --module=app

설치옵션

–flat : /src/app/ 폴더에 component 를 만들 때처럼 폴더를 생성하지 않고 파일을 생성합니다.
–module=app : AppModule 에 자동으로 import 합니다.

app.module.ts에 자동으로 imports:항목에 추가가 되므로, 따로 app.module 을 설정하지 않아도 되는 장점이 있습니다. 앵귤러는 설정때문에 왔다갔다 하는게 너무 많아요.

app.component.html파일

<div class="container">
  <router-outlet></router-outlet>
</div>

<router-outlet></router-outlet>이 라우팅이 적용되는 위치 입니다. 저는 router-outlet 을 html에 입력을 하지 않아서 적용이 되지 않았습니다.
이 거 찾는데 한시간 걸림. 왜 안되는지!!! 슬프다.

app-routing.module.ts파일

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

import { SalesComponent} from './sales/sales.component';
import { NotfoundpageComponent } from './notfoundpage/notfoundpage.component';

const routes: Routes = [
  {path: 'sales/:id', component: SalesComponent},
  { path: '', redirectTo: '', pathMatch: 'full'},
  { path: '**', component: NotfoundpageComponent }
]

@NgModule({
  imports: [ RouterModule.forRoot(routes)],
  exports: [ RouterModule]
})
export class AppRoutingModule {
  constructor() {}
}

• 라우팅 참조