Как импортировать угловой веб-компонент в другое угловое приложение - PullRequest
Новая
       7

Как импортировать угловой веб-компонент в другое угловое приложение

0 голосов
/ 01 июля 2019

У меня есть одно приложение, созданное с помощью Angular 5.2. Я также создал веб-компонент из Angular 8.0. Если я собираюсь поместить этот веб-компонент в статический HTML, я бы сделал это так: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Custom Button Test Page</title>
  <!-- This is the Web Component import -->
  <script src="elements.js"></script>
</head>

<body>
<custom-button></custom-button>
</body>

</html>

При запуске этого файла index.html будет встроен веб-компонент. Однако, если я применю тот же подход к приложению Angular (чтобы включить его в мое приложение Angular 5.2), он не будет работать.

Если я пытаюсь импортировать напрямую из основного файла index.html, я получаю сообщение об ошибке «файл не найден». Если я импортирую его из скриптов angular.json, я получу неожиданную ошибку токена.

Как именно я должен импортировать веб-компонент Angular в существующее приложение Angular?

1 Ответ

0 голосов
/ 02 июля 2019

Решением было импортировать скрипт в angular.json / .angular-cli.json 

"scripts": [
   "assets/elements.js"
]

Как бы то ни было, если вы оставите его таким, вы все равно получите ошибки, скорее всего, при импорте в несколько зон.js - один из вашего приложения Angular, а другой из приложения Angular Web Components. Решение состоит в том, чтобы отключить один из них. Логично было бы отключить тот, который приходит из веб-компонента, но оказалось, что он не работает. Вам придется удалить импорт zone.js из основного приложения Angular и сохранить его в своем веб-компоненте.

Перейдите на polyfills.ts и закомментируйте или удалите 

import 'zone.js/dist/zone';

Также не забудьте добавить CUSTOM_ELEMENTS_SCHEMA в ваш AppModule, чтобы Angular знал, что вы будете использовать внешние компоненты. 

@NgModule({
    declarations: [ ... ],
    bootstrap:    [ ... ],
    imports: [ ... ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

Теперь вы можете использовать свой веб-компонент в любом месте приложения с помощью 

<custom-button></custom-button>

ВНИМАНИЕ: Этот подход не будет работать, если вы используете разные версии веб-пакета в этих двух приложениях

...