Angular 7 Службы http с параметрами «неопределенные»

Я создал угловой сервис, импортировал его и предоставил в app.module.ts.

И я создал компонент профиля, который содержит данные, поступающие от службы, и импортировал RouterModule, маршруты с постоянными страницами: пути маршрутов, и все в порядке. проблема, которую я получаю:

VM16951:1 GET https://jsonplaceholder.typicode.com/users/undefined 404

Вот код

PagerouteService.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class PagerouteService {
  user: any;
  userid: any;
  result: any;
  constructor (public router: Router, public route: ActivatedRoute, public http: HttpClient) {
    this.route.params.subscribe((params:Params) => {this.user = params;});
    this.userid = this.user['id'];
    this.http.get('https://jsonplaceholder.typicode.com/users/' + this.userid).subscribe(data => {
      this.result = data;
    })
   }

}

ProfileComponent.ts

import { Component, OnInit } from '@angular/core';
import { PagerouteService } from '../../services/pageroute.service';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
  return:any;

  constructor(public pageRoute:PagerouteService) {
    this.return = this.pageRoute.result;
  }

  ngOnInit() {
  }

}

profile.component.html

<p>
  profile works!
</p>
<ul *ngIf = "return">
  <li>{{return.id}}</li>
  <li>{{return.name}}</li>
  <li>{{return.username}}</li>
</ul>

Пути

const pages:Routes = [
  {path: '*', component: AppComponent},
  {path: 'murtada', component: MurtadaComponent},
  {path: 'config', component: ConfigComponent},
  {path: 'userinfo', component: UserinfoComponent},
  {path: 'profile/:id', component: ProfileComponent},
]