Pretty much what the title says, I can’t find what I’m doing wrong. Here’s the code for circulo.component.ts:
import { Component, OnInit } from '@angular/core';
import { Circulo } from '../figura-geometrica';
@Component({
selector: 'app-circulo',
templateUrl: './circulo.component.html',
styleUrls: ['./circulo.component.scss'],
standalone: true,
})
export class CirculoComponent extends Circulo implements OnInit {
override radio: number = 0;
constructor(nombre:string, radio:number) {
super(nombre, radio)
this.radio = radio;
}
ngOnInit() {}
override calcularPerimetro(): number {
return this.radio * 2 * 3.1416
}
}
This is what it’s importing on the second line from circulo.component.ts, figura-geometrica.ts:
export abstract class FiguraGeometrica {
nombre : string = "";
constructor(nombre:string) {
this.nombre = nombre;
}
abstract calcularPerimetro(): number
}
export class Circulo extends FiguraGeometrica {
radio : number = 0;
constructor(nombre:string, radio:number) {
super(nombre)
this.radio = radio;
}
override calcularPerimetro(): number {
return this.radio * 2 * 3.1416
}
}
export class TrianguloEscaleno extends FiguraGeometrica {
ladoA : number = 0;
ladoB : number = 0;
ladoC : number = 0;
constructor(nombre:string, ladoA:number, ladoB:number, ladoC:number) {
super(nombre)
this.ladoA = ladoA;
this.ladoB = ladoB;
this.ladoC = ladoC;
}
override calcularPerimetro(): number {
return this.ladoA + this.ladoB + this.ladoC
}
}
export class TrianguloEquilatero extends TrianguloEscaleno {
constructor(nombre:string, ladoA:number, ladoB:number, ladoC:number){
super(nombre, ladoA, ladoB, ladoC)
}
}
Now this is where I get the problem, home.page.ts:
import { Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
import { CirculoComponent } from "../modelo/circulo/circulo.component";
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
imports: [IonHeader, IonToolbar, IonTitle, IonContent, CirculoComponent], <- there
standalone: true,
})
export class HomePage {
constructor() {}
}
imports: [IonHeader, IonToolbar, IonTitle, IonContent, CirculoComponent], <- that’s what is giving me the problem, which is this:
Component imports must be standalone components, directives, pipes, or must be NgModules.(-992012)
I also think that figura-geometrica.ts is unnecessary, but that’s how my teacher has done it, but with an easier example.
3
- You need to add the
IonInput,IonItem, andIonListcomponents to theimportsarray forCirculoComponent.
import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
@Component({
...,
imports: [IonInput, IonItem, IonList],
})
export class CirculoComponent extends Circulo implements OnInit {
...
}
- The arguments in the
constructorof a component are dependency injectors. For your scenario, you need to add/register the Injection Token fornombreandradiointo theproviderseither for the component or the root application/module. Next, use the@Inject()decorator to get the value from DI.
import { Component, Inject, OnInit } from '@angular/core';
import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';
@Component({
selector: 'app-circulo',
templateUrl: './circulo.component.html',
styleUrls: ['./circulo.component.scss'],
standalone: true,
imports: [IonInput, IonItem, IonList],
providers: [
{ provide: 'nombre', useValue: 'test' },
{ provide: 'radio', useValue: 1 },
],
})
export class CirculoComponent extends Circulo implements OnInit {
constructor(
@Inject('nombre') nombre: string,
@Inject('radio') radio: number
) {
super(nombre, radio);
this.radio = radio;
}
}
For adding the injection token to the root application:
bootstrapApplication(App, {
providers: [
...,
{ provide: 'nombre', useValue: 'test' },
{ provide: 'radio', useValue: 1 },
],
});
Demo @ StackBlitz