ERROR Error: NG0203: inject() after importing a Component declared in a custom angular library

Question

Hi I have created a custom angular library where I have implemented a simple CardComponent, this component uses MatRippleModule.

card.component.ts

import { Component } from '@angular/core';
import { MatRippleModule } from '@angular/material/core';

@Component({
  selector: 'card',
  standalone: true,
  imports: [MatRippleModule],
  templateUrl: './card.component.html',
  styleUrl: './card.component.css'
})
export class CardComponent {}

card.component.html

<div matRipple>
    Click Me
</div>

public-api.ts

export * from './components/card/card.component';

I have built the library and installed into the AngularProject I want to use.

example.component.ts

import { Component, ViewEncapsulation } from '@angular/core';
import { CardComponent } from 'lib';

@Component({
    selector     : 'example',
    standalone   : true,
    templateUrl  : './example.component.html',
    imports      : [CardComponent],
    encapsulation: ViewEncapsulation.None,
})
export class ExampleComponent {}

example.component.html

<div class="flex flex-col flex-auto min-w-0">
    <!-- Main -->
    <div class="flex-auto p-6 sm:p-10">
        <card></card>
    </div>
</div>

As you can see it's a simple example of how to install a and create a custom library but this time I have used Angular 17 for practice. But for some reason I ignore is not working, has to be something related of Angular 17 config, but what ? I have done this before in other angular versions and works properly.

Error:

src_app_modules_admin_example_example_routes_ts.js:2 ERROR Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203
    at injectInjectorOnly (core.mjs:3824:15)
    at Module.ɵɵinject (core.mjs:3837:60)
    at Object.MatCommonModule_Factory [as useFactory] (core.mjs:83:103)
    at Object.factory (core.mjs:5338:38)
    at core.mjs:5239:43
    at runInInjectorProfilerContext (core.mjs:3644:9)
    at R3Injector.hydrate (core.mjs:5238:17)
    at R3Injector.get (core.mjs:5106:33)
    at injectInjectorOnly (core.mjs:3831:40)
    at ɵɵinject (core.mjs:3837:60)

Note: The error be visible when I try to append "" in ExampleComponent template.

Answer 1

Faced the same issue today as well.

In my case it was because I symlinked the library into the application project.

I wanted to test the library before publishing it, so I npm install my-lib-path/dist into my project. Resulting in the library being installed as a symlink and causing the NG0203 issue.

To solve it, just add the following in angular.json:

"projects": {
  "projectName": {
    "architect": {
      "build": {
        "options": {
          "preserveSymlinks": true
        }
      }
    }
  }
}