Cannot determine the module for class MyComponent in /tmp/sandbox/workspace/src/my.component.ts! Add Component to the NgModule to fix it

#1 
import {Component, Injectable} from "@angular/core";
import {Utils} from "../../../shared/utils/utils";


@Component({
    templateUrl: "goal-header.component.html"
})

export abstract class GoalHeaderComponent {

    protected captionKeys: string[];

    protected isVisible() : boolean {
        return true;
    }

    protected abstract getFirstValue(): number;

    protected abstract getSecondValue(): number;

    protected abstract getThirdValue(): number;

    private getFloat(number: number | string): number {
        return Utils.convertToNumber(number);
    }

    private isValidNumber(number: number | string) {
        return typeof number === "string" ? !Utils.isNaN(number) : !isNaN(number);
    }
}

How can I rewrite above or fix the error? Latest ionic cli.

#2

I would try to remove “abstract” ?

Not sure but kind of have the feeling that an abstract class can’t be a component in the same time…at least in my project all my abstract class aren’t use as component

#3

Do we have documentation about this?

#4

Don’t know, that’s why I wrote “I have the feeling” :wink:

I use several abstract classes in my project and when I started I wasn’t able to use them as component, therefore I thought it was the way it suppose to be…but if you are more successful than me I would like to correct my misunderstanding

#5

Note bene, just in case, I use abstract class like following:

export abstract class MyAbstractComponent {
}

@Component({
     templateUrl: 'test.html',
    selector: 'test'
})
export class TestComponent extends MyAbstractComponent {
}

and if I need an injection in the abstract class, for example navController:

 export abstract class MyAbstractComponent {

   doStuffs(navController: NavController) {
     navController.push('whatever'); // Note, no this
    }
}

@Component({
     templateUrl: 'test.html',
    selector: 'test'
})
export class TestComponent extends MyAbstractComponent {

   constructor(private navController: NavController) {
   }

  ionViewDidLeave() {
     this.doStuffs(this.navController);
   }
}

inheritance works too:

 export abstract class MyAbstractComponent {

   doStuffs(navController: NavController) {
     this.doSomethingBefore();
     navController.push('whatever'); // Note, no this
    }

   protected abstract doSomethingBefore();
}

@Component({
     templateUrl: 'test.html',
    selector: 'test'
})
export class TestComponent extends MyAbstractComponent {

   constructor(private navController: NavController) {
   }

  ionViewDidLeave() {
     this.doStuffs(this.navController);
   }
  
  protected doSomethingBefore() {
     console.log('yep');
  }
}

That’s all I know about abstract :wink: