Angular Material не работает с угловыми элементами ⇐ Html

[Anonymous]

Я пытаюсь создать набор элементов Angular, используя Angular Material. Когда я запускаю приложение Angular, все работает нормально. Однако, как только я экспортирую свой элемент, все, что использует Angular Material, просто ломается.
Это то, что есть в моем компоненте

Код: Выделить всё

First Name




Last Name



Submit

Когда я запускаю это внутри своего проекта Angular, оно выглядит так, как я ожидал (Примечание: чтобы запустить это, я заменил тело index.html в проекте Angular своим тегом test-element)
Снимок экрана элемента Angular, работающего внутри проекта Angular
Поэтому я пытаюсь экспортировать его с помощью элементов Angular. Я запустил ng add @angular/elements и добавил следующее в свой app.module.ts

Код: Выделить всё

@NgModule({
declarations: [
AppComponent,Ï
TestElementComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatInputModule,
FlexLayoutModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [],
// bootstrap: [AppComponent],
})
export class AppModule {
constructor(private injector: Injector) {}

ngDoBootstrap() {
const elements = [
{ name: 'test-element', component: TestElementComponent },
];

// I plan on adding a bunch of elements which I why I have the for loop
for (let i = 0; i < elements.length; i++) {
const element = elements[i];

const ngElement = createCustomElement(element.component, {
injector: this.injector,
});
customElements.define(element.name, ngElement);
}
}
}

Отмечу, я также попытался переместить это в файл main.ts в .then платформыBrowserDynamic().bootstrapModule(AppModule) и получил тот же результат.
Затем у меня также есть сценарий concat

Код: Выделить всё

const fs = require("fs-extra");
const concat = require("concat");

(async function () {
const files = [
"./dist/elements-demo/runtime.js",
"./dist/elements-demo/main.js",
"./dist/elements-demo/polyfills.js",
];

await fs.ensureDir("elements");
await concat(files, "elements/elements.js");
await fs.copyFile("./dist/elements-demo/styles.css", "elements/styles.css");
})();

Затем у меня есть скрипт build:elements ng build --output-hashing none && node concat.js
Поэтому я создаю простую HTML-страницу и пытаюсь использовать этот элемент

Код: Выделить всё

Elements Demo





Customer's Website

По сути, это дает мне совершенно пустую страницу:
Элементы не работают после использования на неугловой HTML-странице.
Я также пытался включить , но это не сработало. Я пробовал использовать , и ничего не изменилось.
Вот версии всего, что я использую

Код: Выделить всё

  "dependencies": {
"@angular/animations": "~12.2.0",
"@angular/cdk": "^12.2.12",
"@angular/common": "~12.2.0",
"@angular/compiler": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/elements": "^12.2.13",
"@angular/flex-layout": "^12.0.0-beta.35",
"@angular/forms": "~12.2.0",
"@angular/material": "^12.2.12",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"concat": "^1.0.3",
"document-register-element": "^1.7.2",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},

РЕДАКТИРОВАТЬ
Я попробовал использовать ShadowDOM для инкапсуляции представления, и это ВИДНО сработало.
Экспортировалось с помощью Shadow DOM
Я перепробовал все комбинации вещей, которые пробовал использовать Shadow DOM для инкапсуляции представления, но каждый раз получал скриншот выше.

Подробнее здесь: https://stackoverflow.com/questions/698 ... r-elements