Using input Signal in Angular Library

Question

When using an Angular (19) Library project within another Angular 19 Application project (these are separate projects) using npm link, I get following runtime error when building the application for production:

ERROR Error: NG0203: inputFunction2() can only be used within an injection 
context such as a constructor, a factory function, a field initializer, or 
a function used with `runInInjectionContext`. Find more at 
https://angular.dev/errors/NG0203

(In order to receive this error, I set "optimization": false in angular.json.)

I am confused as I believe that I am within a injection context (see example of the component). However, when I run the project in the development environment using npm run start, then the application works like a charm.

The issue is an input signal in my component (full minimal working example later in question):

label = input<string>('');

If I remove that, it works well. I also tried to use @Input with a Signal but I get a similar error.

Is it not possible to use Signals in an Angular Library project?

---

I have an Angular (19) Library project:

ng new components --create-application=false
ng generate library my-components
ng generate component my-components/info-tooltip

The library is added to the application project using npm link respectively npm link my-components. (As mentioned, everything works very well in the development enviroment.)

A minimal version of InfoTooltipComponent that reproduces the issue:

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

@Component({
  selector: 'app-info-tooltip',
  imports: [],
  template: '<p>{{label()}}</p>',
  styles: [],
  encapsulation: ViewEncapsulation.ShadowDom,
})
export class InfoTooltipComponent {

  label = input<string>('');

}

Then in my application project, I am using the component as following:

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

import { InfoTooltipComponent } from 'my-components';

@Component({
  selector: 'app-test',
  imports: [InfoTooltipComponent],
  template: `
    <app-info-tooltip label="Hello, World!"></app-info-tooltip>
  `,
  styles: [],
})
export class TestComponent {
  
}

Answer 1

Matthieu Riegler pointed out in his comment that I probably have 2 different instances of the core package. Unfortunately I was not able to figure out how to have only one instance while using npm link. I hope someone else comes along with a solution.

Meanwhile, since npm link is not working in production, I decided to write a build.sh using npm pack script that is called when building the application:

#!/bin/bash

libraryPath=/path/to/projects/components
applicationPath=/path/to/projects/application

cd "$libraryPath"
ng build

cd "$libraryPath/dist/my-components"
file=$(npm pack)

cd "$applicationPath"
npm install "$libraryPath/dist/my-components/$file"
npm run build

rm "$libraryPath/dist/my-components/$file"

(This script has obviously room for improvement. Error handling omited for simplicity in this example.)

Answer 2

In my case it was the IDE creating an import that went all the way back, left the project, and found the library's source code, importing that instead of the link found in node_modules.

Basically I had to replace

import { SuccessIconComponent } from "../../../../../../mx/mx-angular-sdk/dist/ngx-ui";

with

import { SuccessIconComponent } from "@mycompany/ngx-ui";