使用 Angular 库中的输入信号

Question

当使用

npm link

在另一个 Angular 19 应用程序项目（这些是单独的项目）中使用 Angular (19) 库项目时，在构建生产应用程序时出现以下运行时错误：

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

（为了收到这个错误，我在

"optimization": false

中设置了

angular.json

。）

我很困惑，因为我相信我处于注入上下文中（请参阅组件示例）。但是，当我使用

npm run start

在开发环境中运行该项目时，该应用程序就像一个魅力。

问题是我的组件中的

input

信号（稍后将讨论完整的最小工作示例）：

label = input<string>('');

如果我删除它，效果很好。我还尝试将

@Input

与信号一起使用，但出现类似的错误。

是否无法在 Angular 库项目中使用信号？

---

我有一个 Angular (19) 库项目：

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

分别使用

npm link

将库添加到应用程序项目中

npm link my-components

。 （如前所述，在开发环境中一切都运行良好。）

重现该问题的

InfoTooltipComponent

的最小版本：

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>('');

}

然后在我的应用程序项目中，我使用以下组件：

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 指出我可能有 2 个不同的核心包实例。不幸的是，我没有成功地弄清楚如何在使用

npm link

时仅拥有核心包的一个实例。我希望其他人能提出解决方案。

同时，由于

npm link

在生产中不起作用，我决定使用构建应用程序时调用的

build.sh

脚本编写

npm pack

：

#!/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"

（这个脚本显然还有改进的空间。为了简单起见，在这个例子中省略了错误处理。）