Angular 7: экспорт угловых элементов из угловой библиотеки

Question

Я пытаюсь экспортировать угловые пользовательские элементы, определенные в библиотеке L - через конструктор AppModule библиотеки L (customElements.define ('my-custom-element', myComponent)).

При импорте библиотеки L мое угловое приложение выдает исключение при использовании элемента,

Uncaught Error: Template parse errors:
'my-custom-element' is not a known element.

Вот мой файл public-api.ts: https://github.com/sanjay51/IxAngularFramework/blob/master/projects/ix-angular-elements/src/public-api.ts

Я не смог найти, возможно ли даже экспортировать пользовательский элемент из библиотеки. Любое руководство в этом отношении будет оценено.

Спасибо.

Обновление

Вот как я потребляю то же самое, и как я объявляю свои пользовательские элементы: https://github.com/sanjay51/IxAngularFramework/blob/master/src/app/app.module.ts

Проблема, которая возникает таким образом, заключается в том, что мой пользовательский элемент отображается дважды, один раз как компонент, а второй как пользовательский элемент.

Вот снимок: https://pasteboard.co/IkQtuJp.png

Answer 1

Вы используете одно и то же имя тега для селектора (ix-note и ix-form) компонента Angular и тега пользовательского элемента.
Поэтому он создается дважды, потому что вы используете его внутри приложения Angular.После того, как Angular создаст его (как угловой компонент), а затем - браузер (как пользовательский элемент / угловой элемент).

Это можно решить несколькими способами:
Либо удалитеselector из компонента Angular, если он не используется в качестве компонента Angular где-либо еще.
Или создайте другой тег для пользовательского элемента (например, ix-note-element) и используйте его в своем HTML.

Для обоих подходов вам нужно будет добавить следующее в ваш модуль приложения:

  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],

Это говорит Angular сохранять спокойствие, если он обнаруживает теги типа ix-note-element, которые он не знает.

---

Редактировать:

Я копнул немного глубже, и теперь он работает:

1. Обязательно переходите ко второму подходуупомянутое выше.Используйте xy-element в качестве тега для угловых элементов и добавьте CUSTOM_ELEMENTS_SCHEMA к app.module.ts
2. С app.module.ts, удалите конструктор и следующий код:

  entryComponents: [
    IxFormComponent,
    NoteComponent
  ]

(относится только к ix-angular-elements.module.ts)
3. В ix-angular-elements.module.ts добавьте следующий код конструктора:

  constructor(injector: Injector) {
    const formElement = createCustomElement(IxFormComponent, {injector: injector});
    customElements.define('ix-form-element', formElement);

    const noteElement = createCustomElement(NoteComponent, {injector: injector});
    customElements.define('ix-note-element', noteElement);
  }

Это только длязарегистрируйте свои пользовательские элементы в реестре браузера Browser CE.Библиотека должна быть автономной, поэтому оставьте код здесь.(Это также предотвращает проблемы с импортом)
4. Запустите npm install tslib (этого не было)
5. Добавьте "@angular/forms": "^7.2.15" как равноправные зависимости в вашу библиотеку (projects/ix-angular-elements/package.json) (этого тоже не было)
6. (не уверен, что эта проблема была проблемой). В ix-angular-elements.module.ts повторно импортируйте все пакеты Angular с относительными путями (вам не нужно указывать путь в целом)
7. Используйте библиотеку, подобную этой:

<ix-note title="Note" text="This is an Angular Component"></ix-note>
<ix-note-element title="Note" text="This is an Angular Element"></ix-note-element>

Answer 2

Вам необходимо импортировать компонент в модуль библиотек и добавить его в раздел объявлений и экспорта модуля.

Затем вам нужно добавить этот модуль в файл public-api.ts в библиотеке.

export { YourLibModule } from './lib/your-lib-module';

Затем в потребляющем приложении вам нужно импортировать YourLibModule.

Вот файл public-api от одной из моих библиотек.

https://github.com/adriandavidbrand/ngx-ez/blob/master/projects/ngx-ez/src/public-api.ts