How to use the @angular/router-deprecated.CanActivate function in @angular/router-deprecated

* Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

import {APP_BASE_HREF} from '@angular/common';
import {Component, ComponentRef} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {CanActivate, ComponentInstruction, ROUTER_DIRECTIVES, RouteConfig} from '@angular/router-deprecated';

function checkIfWeHavePermission(instruction: ComponentInstruction) {
  return instruction.params['id'] == '1';
}

// #docregion canActivate
@Component({selector: 'control-panel-cmp', template: `<div>Settings: ...</div>`})
@CanActivate(checkIfWeHavePermission)
class ControlPanelCmp {
}
// #enddocregion


@Component({
  selector: 'home-cmp',
  template: `
    <h1>Welcome Home!</h1>
    <div>
      Edit <a id="user-1-link">User 1</a> |
      Edit <a id="user-2-link">User 2</a>
    </div>
  `,
  directives: [ROUTER_DIRECTIVES]
})

<div class="ui cards">
                
            <div>

        </div>
    `,
    directives: [ImportPgn, ROUTER_DIRECTIVES, GamesCardItem],
    styles: [`
        .ui.icon.buttons {
            margin-bottom: 2rem;
        }
    `]
})
@CanActivate((next, prev) =&gt; {
    // TODO: Implement when we have DI here to get hold of our authenticationService
    // https://github.com/angular/angular/issues/4112
    // For now it is not much of a problem since we will be hiding the link to this component
    // and the back end won't serve any content anyway
    return true;
})
export class GamesList {
    private _games: Observable[] = [];
    private _isLoading : boolean = true;

    constructor (
        private _logger: LoggerService,
        private _importService: ImportService,
        private _notificationService: NotificationService,
        private _gamesService: GamesService
    ) {</div>

import { Component } from '@angular/core';
import {ROUTER_DIRECTIVES, RouteConfig, CanActivate} from '@angular/router-deprecated';

import {GamesService} from '../../services/api/games.service';
import {SocketApiService} from '../../services/socketApi.service';
import {GamesList} from './gamesList.component';
import {GameDetail} from './gameDetail.component';

@Component({
    providers: [GamesService, SocketApiService],
    template: `
        
    `,
    directives: [ROUTER_DIRECTIVES]
})
@CanActivate((next, prev) => {
    // TODO: Implement when we have DI here to get hold of our authenticationService
    // https://github.com/angular/angular/issues/4112
    // For now it is not much of a problem since we will be hiding the link to this component
    // and the back end won't serve any content anyway
    return true;
})
@RouteConfig([
    { path: '/', name: 'GamesList', component: GamesList, useAsDefault: true },
    { path: '/:id', name: 'GameDetail', component: GameDetail }
])
export class Games {}

`,
    directives: [Chessboard, MovesBrowser, BarChartAnalysis]
})
@CanActivate((next, prev) => {
    // TODO: Implement when we have DI here to get hold of our authenticationService
    // https://github.com/angular/angular/issues/4112
    // For now it is not much of a problem since we will be hiding the link to this component
    // and the back end won't serve any content anyway
    return true;
})
export class GameDetail implements OnDestroy {
    private _game: Game;
    private _analysisCompleted: boolean = false;
    private _chessJsInstance: Chess = new Chess();
    private _shortHistoryCache: any[] = [];
    private _fenCache: string[] = [];
    private _currentPositionIndex: number = -1;
    private _subscriptions: Subscription[] = [];

    constructor (

import { Component, OnInit } from '@angular/core';
import { Router, RouteParams, CanActivate} from '@angular/router-deprecated';
import { tokenNotExpired } from 'angular2-jwt';

import { IItem } from '../shared/item.interface';
import { ItemService } from '../shared/item.service';


@Component({
	templateUrl: 'app/item-detail/item-detail.component.html',
	providers: [ItemService]
})
@CanActivate(() => tokenNotExpired())
export class ItemDetailComponent implements OnInit {
	parmValue: string;
	item: IItem;

	constructor(private _routerParams: RouteParams,
		        private _router: Router,
		        private itemService: ItemService) {
		this.parmValue = this._routerParams.get('id');
	}

	ngOnInit(): void {
		this.itemService.getItem(Number(this.parmValue)).subscribe(
			item => this.item = item,
			error => console.log(error));
	}

import { RecordRequestService } from "./record-request.service";
import { HighlightDirective } from "../directives/highlight.directive";
import { ConfigService } from "../config.service";

@Component({
  templateUrl: "/static/app/record-request/record-request.component.html",
  providers: [RecordRequestService],
  directives: [HighlightDirective],
  styles: [`
    .panel-heading {overflow:hidden;}
    .wrap { text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:200px; }
    td { font-size:13px; }
    th { font-size:14px; }
  `]
})
@CanActivate(() => isLoggedin())
export class RecordRequestComponent implements OnInit {

  recordRequests: RecordRequest;
  state: string = "pending";
  errorMessage: string;
  jiraUrl: string = ConfigService.get("jiraUrl");

  constructor(
    private router: Router,
    private recordRequestService: RecordRequestService,
    private routeParams: RouteParams
  ) { }

  ngOnInit() {
    let state: string = this.routeParams.get("state");
    this.state = (state) ? state : "pending";

import {
  ROUTER_DIRECTIVES,
  CanActivate,
  ComponentInstruction,
  OnActivate,
  CanDeactivate,
  OnDeactivate } from '@angular/router-deprecated';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'pomodoro-tasks-editor',
  directives: [ROUTER_DIRECTIVES],
  providers: [Title],
  templateUrl: 'app/tasks/task-editor.component.html'
})
@CanActivate((
  next: ComponentInstruction,
  prev: ComponentInstruction): boolean => {
  let passPhrase = prompt('Say the magic words');
  return (passPhrase === 'open sesame');
}
  )
export default class TaskEditorComponent implements OnActivate, CanDeactivate, OnDeactivate {

  constructor(private title: Title) { }

  routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction): void {
    this.title.setTitle('Welcome to the Task Form!');
  }

  routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction): Promise | boolean {
    return confirm('Are you sure you want to leave?');

declare var $: any;


@Component({
  templateUrl: "/static/app/record-request/record-request-detail.component.html",
  providers: [DomainService, RecordService, RecordRequestService],
  directives: [ROUTER_DIRECTIVES],
  styles: [`
    td span { cursor:pointer; }
    :host >>> .new { color: green; }
    :host >>> .old { color: silver; }
  `]
})
@CanActivate(() => isLoggedin())
export class RecordRequestDetailComponent implements OnInit {

  domain: Domain;
  record: Record;
  recordRequest: RecordRequest;
  showAutoAcceptanceMessage: boolean = false;
  backUrlParams: {[key: string]: string} = {};

  constructor(
    private routeParams: RouteParams,
    private router: Router,
    private recordRequestService: RecordRequestService,
    private domainService: DomainService,
    private recordService: RecordService
  ) { }