我正在尝试使用Angular Material创建一组Angular Elements。当我运行Angular应用程序时，一切都运行良好。但是，一旦我导出我的元素并在其中使用Angular Material，事情就会崩溃。
这是我的组件中的内容
<div fxLayout="row" fxLayoutGap="15px">
<mat-form-field appearance="outline">
<mat-label>First Name</mat-label>
<input matInput type="text" />
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Last Name</mat-label>
<input matInput type="text" />
</mat-form-field>
</div>
<button mat-raised-button color="primary">Submit</button>
当我在我的Angular项目中运行它时，它看起来和我预期的一样（注意：为了运行这个，我用我的test-element标签替换了Angular项目中index.html的主体部分）。 然后我尝试使用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);
}
}
}
我注意到，我尝试将这个操作也移动到platformBrowserDynamic().bootstrapModule(AppModule)的.then函数中，但结果相同。
然后我也有一个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页面并尝试使用该元素<!DOCTYPE html>
<html>
<title>Elements Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<body>
<h1>Customer's Website</h1>
<test-element></test-element>
<script src="http://localhost:8080/elements/elements.js"></script>
</body>
</html>
这基本上给了我一个完全空白的页面： 在非Angular HTML页面中使用后，元素不起作用 我还尝试包含
<link href="http://localhost:8080/elements/styles.css" rel="stylesheet" />，但那行不通。我尝试使用<link href="https://unpkg.com/@angular/material@12.2.12/prebuilt-themes/indigo-pink.css" rel="stylesheet"/>，但没有任何变化。这里是我正在使用的所有东西的版本。
"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 进行视图封装，有点儿成功。
我尝试了所有使用 ShadowDOM 进行视图封装的组合，但是上面的截图是每次都得到的结果。