404 error 페이지 추가

소스코드

이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.

이 게시물의 소스코드는 기본사이트 만들기 / 프로젝트 생성, route 만들기에서 이어집니다.

angular-site.git 을 clone 한 적이 있는 경우: 터미널에서 해당 폴더로 이동 후 아래 명령어들을 붙여넣기합니다. 폴더 내 모든 코드가 이 게시물의 코드로 교체됩니다. 이를 원치 않으시면 이 방법을 선택하지 마세요.

git reset --hard
git pull
git reset --hard d0ce71c
git reset --soft eecdaa6
npm install
atom .

angular-site.git 을 clone 한 적이 없는 경우: 터미널에서 코드를 다운 받을 폴더로 이동한 후 아래 명령어들을 붙여넣기하여 angular-site.git 을 clone 합니다.

git clone https://github.com/a-mean-blogger/angular-site.git
cd angular-site
git reset --hard d0ce71c
git reset --soft eecdaa6
npm install
atom .

- Github에서 소스코드 보기: https://github.com/a-mean-blogger/angular-site/tree/d0ce71c305febaacbc5d08c4fa95af3f98418809


Angular 사이트에 404 error 페이지를 추가해 봅시다.

이전 강의에서 route이 설정되지 않은 페이지에 접근하려하면 "/"로 redirect 되는 것을 보았습니다. 설정되지 않은 route에 접근하면 특정한 페이지를 보여주는 방법에 대해 알아 봅시다.

이번 강의는 짧고 간단합니다.

폴더 구조


주황색은 변경된 파일, 녹색은 새로 생성된 파일, 회색은 변화가 없는 파일입니다.

아래 명령어로 error404 component를 생성해 줍시다.

$ ng g component error404 --spec false

--spec false를 options으로 사용하면 .spec.ts를 생성하지 않습니다.

코드

error404.component.html를 살펴봅시다. error404.component.css는 빈 파일이고 error404.component.ts는 ng g component error404 로 생성된 그대로 이므로 살펴보지 않겠습니다.

<!-- src/app/error404.component.html -->

<div class="page">
  <h2>
    404 Not Found!
  </h2>
</div>

설명할 것이 없는 static 파일입니다. 

다음으로 app-routing.module.ts를 살펴봅시다.

// src/app/app-routing.module.ts

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

import { WelcomeComponent } from './welcome/welcome.component';
import { Error404Component } from './error404/error404.component';

const routes: Routes = [
  { path: '',  component: WelcomeComponent },
  { path: '**', component: Error404Component }, //1
];

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

1. 에러페이지의 비밀은 '**'에 있습니다. 즉 모든 route를 받아서 Error404Component를 표시하는 것이지요. 좀 허무한가요?

app.module.ts는 ng g component error404로 생긴 변화외에는 바뀐것이 없으므로 설명하지 않겠습니다.

실행 결과

Angular-CLI 명령어 사용해서 서버를 실행합시다. 

ng serve --open

메뉴 링크를 눌러봅시다.

이전 강의와는 다르게 404 에러페이지가 표시됩니다.

마치며..

지금까지는 기본적인 사이트의 틀을 만들어 보았습니다. 다음번 강의에서는 API를 연결합니다.

댓글

댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP