Не работает модель данных объекта

Нужна ваша помощь. У меня есть массив данных, который находится в отдельном файле. Я его пробую отрисовывать и извлекаю из него данные с помощью сервиса. Я пытаюсь сделать маршрутизацию для каждого отдельного объекта. Я использую модель, чтобы иметь представление как выглядит объект, однако у меня ошибка в сервисе, которая выглядит так: Type 'Observable<null>' is not assignable to type 'Observable<IBoxModel>'. Type 'null' is not assignable to type 'IBoxModel'. В чем моя ошибка?

service.ts

import { Injectable } from '@angular/core';
import {postsArray} from "../postArray/arrayPost";
import {Observable, of} from "rxjs";
import {IBoxModel} from "../models/boxModel";

@Injectable({
  providedIn: 'root'
})

export class BoxService {

getBoxs():Observable<IBoxModel[]> {
 return of(postsArray)
}

getBox(id: string):Observable<IBoxModel> {
 return of<IBoxModel>(postsArray + '/' +  id)
}

}

arrayPost.ts

export const postsArray = [
 {id: 1, title: 'Пост №1',},
 {id: 2, title: 'Пост №2',},
 {id: 3, title: 'Пост №3',},
]

IBoxModel

export interface IBoxModel {
  id: number;
  title: string;
}

post.detail.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {BoxService} from "../../services/box.service";
import {IBoxModel} from "../../models/boxModel";

@Component({
  selector: 'app-post-details',
  templateUrl: './post-details.component.html',
  styleUrls: ['./post-details.component.css']
})

export class PostDetailsComponent implements OnInit {

fullPost: IBoxModel;

constructor(private activatedRoute: ActivatedRoute, private boxService: BoxService) {
this.activatedRoute.params.subscribe(params => {
this.boxService.getBox(params['id']).subscribe(value => this.fullPost = value)
})
}

ngOnInit(): void {}
}