不确定如何在 angular 组件中使用自定义 TypeScript class

Question

I have a Component GameBoardComponent that I want to have a Box, which is TypeScript class. I originally tried to just make it like "class Box {}", but I read you can't do that so I tried "export class Box(){}" which now looks like:

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);
    };

}

My gameboard looks like:

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);

  }

}

my app.module looks like:

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 { }

And I get the following error when trying to compile:

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

I googled the error extensively and tried to move Box elsewhere in app.module from Declarations to providers but it gives a different error and can't resolve the constructor types. So maybe thats my problem? Regardless I have spent the better part of a my morning trying to figure out what the right way to use my own typescript class in an angular component is and I haven't found anything that works.

Any help would be appreciated.

Answer 1

There is no need to declare Box in your app.module.ts as it is not module, component, directive or pipe. So just remove Box from app.module.ts .