2

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!

Allef Lobo
  • 21
  • 2

0 Answers0