Routing Angular Applications

About User Resolve

Important Note: There may be an error:

TypeScript Error: Class AboutUserResolve incorrectly implements the interface

Change Resolve<User> to Resolve<User[]> to fix. TypeScript wants the possibility of an array of users to come back.


Just like we created a resolve for our AboutComponent, we'll create the same thing for our AboutUserComponent.


import { Injectable } from '@angular/core';
import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { User } from '../shared/models/user';
import { UserService } from '../shared/services/user.service';

export class AboutUserResolve implements Resolve<User> {

  constructor(private service: UserService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot) {
    let username = route.params['username'];

    return this.service.getUser(username).then(user => {
      if (user) {
        return user;
      } else {
        // navigate the user back to the about page
        return false;