внедрение в автономный компонент завершается с ошибкой при перемещении в библиотеку npm

Question

Я создал простой автономный компонент Angular, который использует токен внедрения для конфигурации:

      export const PERSON_DEFAULT_OPTIONS = new InjectionToken<IPersonDefaults>('...')

export interface IPersonDefaults { ... }

export const providePersonDefaultOptions = (options: IPersonDefaults): Provider => ({
    provide: PERSON_DEFAULT_OPTIONS,
    useValue: options
})

@Component({...})
export class StandaloneComponent {
   readonly #config = inject(PERSON_DEFAULT_OPTIONS, {optional: true})
}

В моем main.ts я просто звонюprovidePersonDefaultOptions()с моими ценностями и все работает отлично.

Теперь я взял этот токен/интерфейс/компонент и поместил его в библиотеку npm. Когда я пытаюсь снова запустить приложение, оно выдает следующую ошибку:

Ошибка: NG0203: inject() необходимо вызывать из контекста внедрения, такого как конструктор, фабричная функция, инициализатор поля или функция, используемая сEnvironmentInjector#runInContext

Я не понимаю, почему этот код не работает как библиотека npm, поскольку он по-прежнему является инициализатором поля, в котором он устанавливается.

Answer 1

Эта ошибка может произойти из-за

1: 2 @angular/core попадает в прилагаемое приложение

Причина в том, что обе отдельные рабочие области имеют свои собственные пакеты @angular/core и оба попадают в связанное приложение. Среда выполнения Angular сохраняет свое состояние в переменных модуля верхнего уровня, которые являются частными для этого модуля, но, имея два экземпляра этого модуля (из обоих экземпляров @angular/core), вы сталкиваетесь с ситуациями, когда состояние правильно инициализируется только в одном экземпляре, не другой. В этом случае контекст внедрения доступен только в «основной» среде выполнения, но части приложения, которые были объединены из «вторичных» частей библиотеки, будут зависеть от «вторичного» состояния среды выполнения. - ЙостК

Моя проблема

У меня было 3 библиотеки, и .
и где оба импортируютc, ноaиспользовал другую версию, чемb. один был под 14-м углом, другой - под 16-м.

Это заставило его использовать 2 разных@angular/core

Решение

Я обновил каждую версию своей библиотеки, чтобы использовать одну и ту же версию.

2: Старыйesцель

Если вы переходите на angular v16, вам может потребоваться изменить цель наES2022

      // tsconfig.json

"compilerOptions": {
  "lib": ["ES2022", "dom"],
  "module": "ES2022",
  "target": "ES2022",
}