Unsure of how to use custom TypeScript class in an angular component

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.

Remove Box from declarations array, like the error suggests, your class has none of the annotations mentioned. — AVJT82
– AVJT82, Commented Oct 31, 2019 at 19:45
Just realized I have my box created in the wrong order it should be after the canvas creation but I get the error regardless. @AJT82 that fixed it. Sorry very new to angular and typescript obviously I was reading you needed to import everything in app.module, I think that only applies to Components though. — Thomas McSwain
– Thomas McSwain, Commented Oct 31, 2019 at 19:58
Yeah, it applies to components... and like the error you get, also Pipes and Directives. These should be declared in declarations array :) — AVJT82
– AVJT82, Commented Nov 1, 2019 at 8:27

StepUp · Accepted Answer · 2019-10-31 19:54:22Z

3

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.

answered Oct 31, 2019 at 19:54

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas McSwain Over a year ago

Thank you this fixed it along with other mistakes made when trying to instantiate the instances.

Collectives™ on Stack Overflow

Unsure of how to use custom TypeScript class in an angular component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related