{ path: 'contact/:id', component: ContactComponent }

constructor(private route: ActivatedRoute) { }

ngDoCheck() {
  this.id = this.route.snapshot.params['id'];
}

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

import { HomeComponent } from './public/home/home.component';
import { NotFoundComponent } from './public/not-found/not-found.component';

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

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

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

import { Resolve } from '@angular/router';
import { of, EMPTY, merge } from 'rxjs';
import { delay, mapTo } from 'rxjs/operators';

export class Contact {
  id: number;
  name: string;
  phone: string;
}

@Injectable({
  providedIn: 'root'
})
export class DataResolveGuard implements CanActivate, Resolve<Contact> {
  // 사용하지 않는다.
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }

  // https://angular.io/api/router/Resolve
  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<Contact> | Promise<Contact> | Contact {

    // let id = route.params['id'];
    let id = route.paramMap.get('id');

    // 가로챈 패스 문자열을 사용하여
    // 동적으로 데이터를 구하거나 가공한 다음
    // 컴포넌트에게 전달한다.
    let contact: Contact = new Contact();
    contact.id = +id;
    contact.name = 'John Doe';
    contact.phone = '1234';

    return of(contact).pipe(delay(1000));
  }
}

import { DataComponent } from './step1/data/data.component';
import { DataResolveGuard } from './step1/data-resolve.guard';

const routes: Routes = [
  {
    path: 'data/:id',
    // 정적인 데이터 = {Key:Value}
    data: { key: 'static value' }, 
    // 동적인 데이터 = {Key:함수가 리턴한 Value}
    resolve: { contact: DataResolveGuard }, 
    component: DataComponent,
  },
];

import { Component, OnInit, DoCheck } from '@angular/core';
import { ActivatedRoute, Params, Data } from '@angular/router';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.scss']
})
export class DataComponent implements OnInit, DoCheck {
  params: Params;
  data: Data;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() { }

  ngDoCheck() {
    this.params = this.activatedRoute.snapshot.params;
    this.data = this.activatedRoute.snapshot.data;
  }
}

import { StoryComponent } from './step2/story/story.component';
import { StoryCanDeactivateGuard } from './step2/story-can-deactivate.guard';

const routes: Routes = [
  { path: 'story', component: StoryComponent, canDeactivate: [StoryCanDeactivateGuard] },
];

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-story',
  templateUrl: './story.component.html',
  styleUrls: ['./story.component.scss']
})
export class StoryComponent implements OnInit {
  isSubmitted: boolean = false;
  article: string = 'A long time ago in a galaxy far, far away...';

  constructor() { }

  ngOnInit() { }

  submit() {
    // Some logic to save

    this.isSubmitted = true;

    // prevent default
    // FormsModule 모듈을 임포트 했다면 필요없다.
    return false;
  }
}

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

import { CanDeactivate, UrlTree } from '@angular/router';
import { StoryComponent } from './story/story.component';

@Injectable({
  providedIn: 'root'
})
export class StoryCanDeactivateGuard implements CanActivate, CanDeactivate<StoryComponent> {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }

  canDeactivate(
    component: StoryComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot)
    : Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (!component.isSubmitted) {
      return window.confirm(
        `When switches, unsaved status is lost.\nReally want to change the path?`);
    }

    return true;
  }
}

import { LoginComponent } from './step3/login/login.component';
import { MemberOnlyComponent } from './step3/member-only/member-only.component';
import { MemberOnlyCanActivateGuard } from './step3/member-only-can-activate.guard';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'member-only', canActivate: [MemberOnlyCanActivateGuard], component: MemberOnlyComponent },
];

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MemberAuthService {
  member = {
    id: 'user',
    pw: '1234'
  }

  constructor() { }

  auth(id: string, pw: string) {
    if (id === this.member.id) {
      if (pw === this.member.pw) {
        // 로그인 처리결과인 사용자 정보를 SessionStorage에 저장한다.
        sessionStorage.setItem('currentUser', JSON.stringify({id: this.member.id}));
        return true;
      }
    }
    return false;
  }
}

import { Component, OnInit } from '@angular/core';
import { MemberAuthService } from '../member-auth.service';
import { Router, ActivatedRoute } from '@angular/router';

export class SignIn {
  id: string;
  password: string;
}

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  errorMessage: string;
  returnUrl: string;
  signin: SignIn = {
    id: null,
    password: null
  };

  constructor(
    private memberAuthService: MemberAuthService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit() {
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
  }

  login() {
    this.errorMessage = null;

    let isMember = this.memberAuthService.auth(this.signin.id, this.signin.password);

    this.signin = {
      id: null,
      password: null
    };

    if (isMember) {
      // 로그인 성공 시 작업
      this.router.navigate([this.returnUrl]);
    } else {
      // 로그인 실패 시 작업
      this.errorMessage = 'ID or Password does not match.';
    }
  }
}

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MemberOnlyCanActivateGuard implements CanActivate {
  constructor(private router: Router) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    console.log('MemberOnlyCanActivateGuard # canActivate()');

    // SessionStorage에 로그인 정보가 있는지 확인하여
    // 있으면 통과 시킨다.
    if (sessionStorage.getItem('currentUser')) {
      return true;
    }

    // 없으면 로그인 화면으로 리다이렉트 한다.
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    // 요청받은 컴포넌트를 연동하지 않는다.
    return false;
  }
}

import { ParentComponent } from './step4/parent/parent.component';
import { Child1Component } from './step4/parent/child1/child1.component';
import { Child2Component } from './step4/parent/child2/child2.component';
import { Child3Component } from './step4/parent/child3/child3.component';
import { ParentCanActivateChildGuard } from './step4/parent-can-activate-child.guard';

const routes: Routes = [
  {
    path: 'parent',
    data: {parentKey: 'parentValue'},
    component: ParentComponent,
    canActivateChild: [ParentCanActivateChildGuard],
    children: [
      { path: '', component: Child1Component },
      { path: 'child1', component: Child1Component },
      { path: 'child2', component: Child2Component, data: {childKey: 'childValue'} },
      { path: 'child3', component: Child3Component },
      { path: 'child3/:id', component: Child3Component },
    ]
  },
];

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

import { CanActivateChild, UrlTree } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class ParentCanActivateChildGuard implements CanActivate, CanActivateChild {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot)
    : Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    console.log('----------------')
    console.log('URL:', state.url);
    console.log('Path Variable:', route.params);
    console.log('Data:', route.data);
    console.log('Query Param', route.queryParams);

    // URI 패스 변수가 '30'인 경우 false를 리턴하게 되면
    // 해당 자식 컴포넌트를 활성화 할 수 없으므로
    // 이를 이용하지 못하는 부모 컴포넌트의 화면을 완성하지 못하게 됩니다.
    // 결론적으로 라우팅 처리가 모두 취소됩니다.
    if (route.params && route.params.id == '30') {
      return false;
    }
    
    return true;
  }
}

import { HeavyCanLoadGuard } from './step5/heavy-can-load.guard';

const routes: Routes = [
  {
    path: 'heavy',
    canLoad: [HeavyCanLoadGuard],
    loadChildren: 'src/app/step5/heavy/heavy.module#HeavyModule'
  },
];

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Heavy1Component } from './heavy1/heavy1.component';
import { Heavy2Component } from './heavy2/heavy2.component';

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

const routes: Routes = [
  { path: '', component: Heavy1Component },
  { path: 'heavy1', component: Heavy1Component },
  { path: 'heavy2', component: Heavy2Component },
]

@NgModule({
  declarations: [Heavy1Component, Heavy2Component],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class HeavyModule {
  constructor() {
    console.log('HeavyModule()');
  }
}

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

import { CanLoad, Route, UrlSegment } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class HeavyCanLoadGuard implements CanActivate, CanLoad {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }

  // 모듈의 기동조건을 만족했는 지 여부를 체크하는 로직을 배치합니다.
  // 모듈이 기동한 후에는 다시 작동하지 않습니다.
  canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
    console.log('HeavyCanLoadGuard # canLoad()');

    console.log(route)
    // {
    //   path: "heavy",
    //   canLoad: Array(1),
    //   loadChildren: "src/app/step5/heavy/heavy.module#HeavyModule" }

    console.log(segments)
    // [
    //   {"path":"heavy","parameters":{}},
    //   {"path":"heavy2","parameters":{}} ]

    if (this.getRandomInt(1, 3) === 1) {
      alert('Unlucky! Routing cancelled.')
      return false;
    } else {
      alert('Lucky! Routing proceed.')
      return true;
    }
  }

  // min(포함)과 max(불포함) 사이의 임의 정수를 반환한다.
  getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
}

import { NgModule } from '@angular/core';

@NgModule()
export class SomeModule { }

console.log('--------------------------');
console.log('proceed code what you need');
console.log('--------------------------');

const routes: Routes = [
  {
    path: 'heavy2', component: Heavy2Component,
    loadChildren: 'src/app/step5/some/some.module#SomeModule'
  },
]