角度コンポーネントでカスタムTypeScriptクラスを使用する方法がわからない

TypeScriptクラスであるBoxが必要なコンポーネントGameBoardComponentがあります。私はもともと「classBox {}」のようにしようとしましたが、それができないと読んだので、「export class Box（）{}」のようになりました。

import {GameBoardComponent} from './game-board/game-board.component';
import * as p5 from 'p5';
export class Box {
    x: number;
    y: number;
    width: number;
    height: number;
    board: GameBoardComponent;
    constructor(x: number,y: number, width:number) {
        this.width = width;
        this.height = width;
        this.x=1;
        this.y=1;

    }
    draw(canvas: p5): void {
        canvas.rect(this.x,this.y,this.width,this.height);
    };

}

私のゲームボードは次のようになります：

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

import * as p5 from 'p5';



/** 
*@todo Game Board
*@body Complete the gameboard, possible integration with other smaller components ie a Tetris component or a Box component
*/
@Component({
  selector: 'app-game-board',
  template: `
    <p>
      game-board works!
    </p>
  `,
  styleUrls: ['./game-board.component.scss']
})
export class GameBoardComponent implements OnInit {
  height: number;
  width: number;
  canvas: p5;
  test: Box;
  constructor() { }

  ngOnInit() {
    this.height = 100;
    this.width = 20;
    this.test = new Box(1,1,this.canvas.width);


    const sketch = (s) => {



      s.preload = () => {
        // preload code
      }

      s.setup = () => {
        s.createCanvas(window.innerWidth/4, window.innerHeight*.8);
      };

      s.draw = () => {
        s.scale(1, -1);
        s.translate(0, -s.height);
        s.background(0);
        s.rect(100, 100, 100, 100);
        s.test.draw();
      };

      s.windowResized = () => {
        s.resizeCanvas(window.innerWidth/4, window.innerHeight*.8);
      };
    }

    this.canvas = new p5(sketch);

  }

}

私のapp.moduleは次のようになります：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {MatButtonModule} from '@angular/material/button';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GameBoardComponent } from './game-board/game-board.component';
import { TetrisPieceComponent } from './tetris-piece/tetris-piece.component';
import { HoldBoxComponent } from './hold-box/hold-box.component';
import { ViewBoxComponent } from './view-box/view-box.component';
import { MainMenuComponent } from './main-menu/main-menu.component';
import { Box } from './Box';

@NgModule({
  declarations: [
    AppComponent,
    GameBoardComponent,
    TetrisPieceComponent,
    HoldBoxComponent,
    ViewBoxComponent,
    MainMenuComponent,
    Box
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule
  ],
  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

また、コンパイルしようとすると、次のエラーが発生します。

Uncaught Error: Unexpected value 'Box' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

私はエラーを広範囲にグーグルで検索し、App.moduleの他の場所でBoxを宣言からプロバイダーに移動しようとしましたが、別のエラーが発生し、コンストラクターの種類を解決できません。だから多分それは私の問題ですか？とにかく、私は朝の大部分を角度コンポーネントで自分のtypescriptクラスを使用する正しい方法を理解しようとして過ごしましたが、うまくいくものは何も見つかりませんでした。

どんな助けでもいただければ幸いです。