Ответ 1
Я считаю, что причина, по которой ваш вопрос не получил достаточного внимания, связана с тем, что он так неоднозначен. Как отметил маршал, в сети есть много замечательных ресурсов (из которых он перечисляет один), чтобы помочь людям начать работу с Angular Elements. Вот ссылка на один, который я нашел очень полезным.
Предполагая, что вы хотите создать библиотеку этих элементов, следуя ссылкам на статьи, это кажется довольно простым. Не зная, что вы подразумеваете под "настройкой среды разработки", вы затрудняетесь ответить на этот вопрос. Вот шаги, которые я предпринял, чтобы создать то, что я считаю средой разработки для создания этих пользовательских компонентов.
Нужно установить Cli, только если он не установлен глобально. (Я предпочитаю устанавливать его локально и ссылаться на него так. Если он установлен глобально, то замените node_modules/.bin/ng в приведенных ниже командах просто ng).
npm install @angular/cli
node_modules/.bin/ng new custom-elements-dev-env
cd custom-elements-dev-env
node_modules/.bin/ng add @angular/elements
node_modules/.bin/ng g library custom-elements-lib --prefix custom
Затем я обновил файл projects/custom-elements-lib/src/lib/custom.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector, DoBootstrap } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { ButtonComponent } from './button.component';
@NgModule({
declarations: [ButtonComponent],
imports: [BrowserModule],
entryComponents: [ButtonComponent]
})
export class CustomModule implements DoBootstrap {
constructor(injector: Injector) {
const customButton = createCustomElement(ButtonComponent, { injector });
customElements.define('custom-button', customButton);
}
ngDoBootstrap() {}
}
Файл projects/custom-elements-lib/src/lib/button.component.ts почти такой же, как и в связанной статье:
import { Component, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'custom-button',
template: '<button (click)="handleClick()">{{label}}</button>',
styles: ['
button {
border: solid 3px;
padding: 8px 10px;
background: tomato;
font-size: 20px;
}
'],
encapsulation: ViewEncapsulation.Native
})
export class ButtonComponent {
@Input() label = 'default label';
@Output() action = new EventEmitter<number>();
/* tslint:disable-next-line:variable-name */
private _clickCount = 0;
handleClick() {
this._clickCount++;
this.action.emit(this._clickCount);
}
}
Файл projects/custom-elements-lib/src/lib/public-api.ts был обновлен до:
export * from './lib/custom.module';
export * from './lib/button.component';
В package.json я добавил скрипт npm для сборки библиотеки: "build:custom": "ng build custom-elements-lib"
src/app/app.module.ts был обновлен, чтобы src/app/app.module.ts эту библиотеку:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CustomModule } from 'custom';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CustomModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Следующим шагом было обновление файла src/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ElementsDemo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<custom-button label="First Value"></custom-button>
<script>
const button = document.querySelector('custom-root');
button.addEventListener('action', (event) => {
console.log(''action' emitted: ${event.detail}');
});
setTimeout(() => button.label = 'Second Value', 3000);
</script>
</body>
</html>
Теперь, если вы запустите npm run build:custom && npm run start вы должны увидеть следующую ошибку:
Не удалось создать HTMLElement: используйте оператор 'new', этот конструктор объекта DOM нельзя вызвать как функцию.
Это можно исправить, обновив файл tsconfig.json в корне проекта. Измените "target": "es5" на "target": "es2015".
Если вы остановите запуск проекта и запустите его снова, он должен запустить браузер, и теперь вы увидите свой пользовательский элемент на странице.
Есть некоторые предостережения по этому поводу, которые, однако, влияют на "среду разработки". Если вы обновите файл в своей пользовательской библиотеке, вам придется вручную вызвать метод сборки для него, чтобы браузер обновил ваши изменения.
Другое состоит в том, что для фактического использования этого компонента в неангулярном проекте вам нужно будет создать шаг сборки/пакета, как описано в указанной статье, следующим образом:
"build": "ng build --prod --output-hashing=none",
"package":
"cat dist/elements-demo/{runtime,polyfills,scripts,main}.js
| gzip > elements.js.gz",
"serve": "http-server --gzip"
Это делается на уровне проекта, так как необходимо включить некоторые из библиотек Angular, которые в настоящее время исключены из сборки библиотеки.
Надеюсь это поможет. Пожалуйста, укажите больше того, что вы пытались и чего именно пытаетесь достичь, если хотите получить ответ на конкретную среду и цели.