I do have a problem. I'm building a component in a Angular Library:
<button
class="btn btn-white btn-home"
[class]="getClassBySeverity()"
[disabled]="disabled"
[hidden]="!renderer"
[ngClass]="{ uppercase: uppercase }"
[type]="type"
[style.color]="labelColor"
[style.backgroundColor]="backgroundColor"
>
<span [hidden]="!hasIcon()">
<span
[ngClass]="{ 'btn-icon-left': icon }"
[hidden]="!isLeftPosition()"
[class]="icon"
></span
>{{ label
}}<span
[hidden]="isLeftPosition()"
[ngClass]="{ 'btn-icon-right': icon }"
[class]="icon"
></span>
</span>
<span [hidden]="hasIcon()">{{ label }}</span>
</button>
But when I embed this component on my application I got:
ERROR NullInjectorError: StaticInjectorError(AppModule)[NgClassImpl -> ElementRef]: StaticInjectorError(Platform: core)[NgClassImpl -> ElementRef]: NullInjectorError: No provider for ElementRef!
It happens because the ngClass.
If I build my component inside the application, it works fine.
I saw in a issue in the github that I need to put preserveSymlinks in my tsconfig.lib.json:
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableResourceInlining": true,
"preserveSymlinks": true
}
But it doesn't work anyway.
Anyone knows the right way to build libraries in Angular?
Thank you!