1

Dynamic icon standalone component

I try to create dynamic icon component that at any module fill with a new set of assets. I want to send it new enum and get appropriate input type intelligence.

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';

type StandardEnum = object;

@Component({
  selector: 'app-icon',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  standalone: true,
  imports: [CommonModule],
})
export class AppIconComponent<T extends StandardEnum> {
  static iconClass?: StandardEnum;
  @Input() iconName: keyof T;
  @Input() disabled: boolean;
  get iconClass(): T {
    return AppIconComponent.iconClass as T;
  }
  public static forRoot<U extends StandardEnum>(
    iconEnum?: U
  ): typeof AppIconComponent<U> {
    AppIconComponent.iconClass = iconEnum;
    return this;
  }
}

The component write as expected When useing in app module the below error appear

enum myEnum {
  ONE = 1,
}

@NgModule({
  imports: [
    AppIconComponent.forRoot<myEnum>(myEnum),
 ]
}) export class AppModule {}

error :

    new (): AppIconComponent<typeof t>;
    prototype: AppIconComponent<any>;
    iconClass?: object;
    forRoot<U extends object>(iconEnum?: U): {
        ...;
    };
}
Value at position 0 in the NgModule.imports of AppModule is not a reference
  Value could not be determined statically.(-991010)
app.module.ts(16, 5): Unable to evaluate function call of complex function. A function must have exactly one return statement.
test.component.ts(17, 2): Function is declared here.

enter image description here

Mor Bargig
  • 198
  • 1
  • 7

1 Answers1

0

I really don't know why this happens, but restarting my ide worked for me. I am using vs code.

Saw an answer here Angular 9: Value at position X in the NgModule.imports is not a reference

To restart vs code you just need this command:

right ctrl + right shift for Windows. right command + right shift for mac.

Keep them pressed and then press P and select Developer: Reload Window

Depending on your IDE or editor, you can do the same. Hope it's helpful for someone.

Robin Thomas
  • 1,317
  • 8
  • 15
DAAN
  • 1
  • i don't really think it the case the IDE failed, because i think i checked it... the problem here is that i try to do something that in not possible maybe yet in angular. Having standalone component with generic type that will work and change the component inputs types by the import generic type. – Mor Bargig Aug 20 '23 at 10:31