Библиотека Angular, экспортирующая автономные компоненты
Я создал библиотеку Angular с автономным компонентом:
import { Component } from '@angular/core';
@Component({
selector: 'app-form-error',
standalone: true,
imports: [],
template: `
<ng-container>
Hello, World!
</ng-container>
`,
})
export class FormErrorComponent {
}
Я экспортирую его на public-apis.ts.
export * from './lib/form-error.component';
Затем я импортирую его в другой проект в свой автономный компонент:
import { FormErrorComponent } from 'myLib/projects/form-error/src/public-api';
@Component({
selector: 'app-dynamic-form',
standalone: true,
imports: [,
FormErrorComponent
],
и в моем шаблоне:
<app-form-error></app-form-error>
Я всегда получаю эту ошибку:
[ОШИБКА] Преобразование декораторов JavaScript в настроенную цель среда ("chrome123.0", "edge122.0", "firefox115.0", "ios16.0", «safari16.0» + 7 переопределений) пока не поддерживается. node_modules/myLib/projects/form-error/src/lib/form-error.comComponent.ts:3:0: 3 │ @Компонент({
Когда я делаю то же самое со службой, она работает отлично, но не с автономным компонентом.
Вот ошибка в Stackblitz
Оно уже есть в ES2022 — то же самое, что и приложение, которое я использую. Но я получаю ту же ошибку для «esnext».
У вас есть компонент в части объявления модуля и вы установили его как автономный. Вы уверены, что это работает?
Точно нет. Но я думал, что именно так можно экспортировать автономный компонент. Я делаю то же самое со службой, и она работает, поэтому я решил попробовать, поскольку хочу избежать заключения ее в NgModule.
Вы можете импортировать автономный компонент в модуль и экспортировать его из модуля (если вы его импортируете), но нет необходимости экспортировать компонент из библиотеки. Использование модуля для отдельного компонента предназначено только для объединения, чтобы дать разработчику возможность импортировать модуль вместо каждого отдельного компонента пакета. Но языковая служба/компиляция должна выдать вам ошибку, если вы настраиваете объявление для автономного компонента.
Ответы 1
К сожалению, я не могу предложить решение этой проблемы, но могу поделиться обходным путем.
Похоже, проблема связана с тем, что esbuild неправильно настроен в многопроектном репозитории. Я не уверен, является ли это проблемой Angular или проблемой esbuild.
Чтобы обойти эту проблему, вам придется использовать старый конструктор веб-пакетов в angular.json.
Это должно быть похоже на вашу текущую конфигурацию:
{
"my-library": {
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"browser": "projects/my-library/src/main.ts",
[...]
},
"configurations": [...]
},
"serve": [...]
}
}
}
Вам нужно изменить конструктор с «приложения» (или «браузера-esbuild») на «браузер»:
"builder": "@angular-devkit/build-angular:browser",
и переименуйте поле «браузер» в «основное»:
"main": "projects/my-library/src/main.ts",
Теперь вы сможете создать или обслуживать приложение.
Вы уже пытались обновить цель в своей библиотеке?