Angular Material 不适用于 Angular 8

问题描述

我是角度元素的新手，想在它上面使用有角度的材料。我的普通组件可以很好地处理角度材质，但是当我尝试将所有内容合并到一个文件中并在本地服务器角度材质上启动它时，HTML 样式也失败了。My normal component without deploying on npx live-server

This is after deploying on local server

从上面的截图中，我们可以看出 HTML 样式的区别。之后，在本地服务器上部署后，我可以看到鼠标指针正在发生变化，就像 Angular Material 中的 mat-slider 一样，但这是不可见的。不知何故，动画或 CSS 没有添加到角度元素中。我尝试了互联网上提供的许多解决方案，但没有一个对我有用。

angular.json

"assets": [
          "src/favicon.ico","src/assets"
        ],"styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css","src/styles.css"
        ],"scripts": [
          {
            "input": "node_modules/document-register-element/build/document-register- 
element.js"
          }
        ]

package.json

{
"name": "angular-app-using-angular-elements","version": "0.0.0","scripts": {
"ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e","build:angular-elements": "ng build --prod --output-hashing=none && node angular-elements- 
build.js"
},"private": true,"dependencies": {
"@angular/animations": "^8.2.14","@angular/cdk": "^8.2.3","@angular/common": "~8.2.9","@angular/compiler": "~8.2.9","@angular/core": "~8.2.9","@angular/elements": "^8.2.14","@angular/forms": "~8.2.9","@angular/material": "^8.2.3","@angular/platform-browser": "~8.2.9","@angular/platform-browser-dynamic": "~8.2.9","@angular/router": "~8.2.9","bootstrap": "^5.0.2","concat": "^1.0.3","document-register-element": "^1.7.2","fs-extra": "^9.0.1","jquery": "^3.6.0","live-server": "^1.2.1","popper.js": "^1.16.1","rxjs": "~6.4.0","tslib": "^1.10.0","zone.js": "~0.9.1"
},"devDependencies": {
"@angular-devkit/build-angular": "~0.803.9","@angular/cli": "~8.3.9","@angular/compiler-cli": "~8.2.9","@angular/language-service": "~8.2.9","@types/jasmine": "~3.3.8","@types/jasminewd2": "~2.0.3","@types/node": "~8.9.4","@webcomponents/webcomponentsjs": "^2.4.3","codelyzer": "^5.0.0","hammerjs": "^2.0.8","jasmine-core": "~3.4.0","jasmine-spec-reporter": "~4.2.1","karma": "~4.1.0","karma-chrome-launcher": "~2.2.0","karma-coverage-istanbul-reporter": "~2.0.1","karma-jasmine": "~2.0.1","karma-jasmine-html-reporter": "^1.4.0","protractor": "~5.4.0","ts-node": "~7.0.0","tslint": "~5.15.0","typescript": "~3.5.3"
}
}

app.module.ts

import { browserModule } from '@angular/platform-browser';
import { NgModule,Injector} from '@angular/core';
import { createCustomElement } from '@angular/elements';

import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';
import { browserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatSliderModule } from '@angular/material/slider';

@NgModule({
declarations: [
AppComponent,HelloWorldComponent
],imports: [
browserModule,browserAnimationsModule,MatButtonModule,MatSliderModule
],entryComponents:[HelloWorldComponent],providers: [],// bootstrap: [AppComponent]
})
export class AppModule { 
constructor(injector: Injector) {
const custom = createCustomElement(HelloWorldComponent,{injector: injector});
customElements.define('app-hello-world',custom);
}
ngdobootstrap() {}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular-elements angular-material angular8