Angular Library - NullInjectorError: StaticInjectorError(AppModule)[NgClassImpl -> ElementRef]

[andersonbalves]

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 herer 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.

Thank you!

[alan-agius4]

Hi @andersonbalves, how are you consuming your library? Are you using npm link by any chance? Can you also provide the output of ng version?

[silentHoo]

Hi @alan-agius4: I have a similiar issue. In My case it's another dependency, but I think this could be the same issue.

I locally linked my library with npm link and use Angular CLI: 8.3.6.

[andersonbalves]

HI @alan-agius4, yes, I'm using npm link.
When I pack and install the library it works.
When I link the library to an application inside the workspace it also works.

    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.4
Node: 10.16.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.4
@angular-devkit/core         8.3.4
@angular-devkit/schematics   8.3.4
@schematics/angular          8.3.4
@schematics/update           0.803.4
rxjs  
```                       6.4.0

[alan-agius4]

Have you configured path mappings as described in https://angular.io/guide/creating-libraries#use-typescript-path-mapping-for-peer-dependencies?

[ahilangopal]

I am having similar issue. In my case its HttpClient. I did Included peer dependencies, still same error.

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[AuthServiceProvider -> HttpClient]: 
  StaticInjectorError(Platform: core)[AuthServiceProvider -> HttpClient]: 
    NullInjectorError: No provider for HttpClient!
NullInjectorError: StaticInjectorError(AppModule)[AuthServiceProvider -> HttpClient]: 
  StaticInjectorError(Platform: core)[AuthServiceProvider -> HttpClient]: 
    NullInjectorError: No provider for HttpClient!

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "declaration": true,
    "inlineSources": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ],
    "paths": {
      "@angular/*": [
        "../../node_modules/@angular/*",
      ]
    }
  },
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true,
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

[alan-agius4]

Hi, the paths mappings need to be in the application's tsconfig (where you are linking to the library) and not the library one.

[alan-agius4]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[guybi]

+1

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}