Creating a Dynamic Standalone Icon Component
I am working on developing a dynamic icon component that can be populated with a new set of assets in any module. I aim to pass a new enum as input and receive the appropriate 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 works as expected. However, when used in the app module, the following error occurs:
enum myEnum {
ONE = 1,
}
@NgModule({
imports: [
AppIconComponent.forRoot<myEnum>(myEnum),
]
}) export class AppModule {}
Error Message :
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.