Angular Elements не включает в себя CSS тему материала должным образом

Я включил Angular Material в свой проект угловых элементов. Я включил все ссылки, как предлагает документация, но когда я строю, кажется, что это angular, материальная тема вообще не включается.

Это ссылка для просмотра того, что я имею в виду: https://next.plnkr.co/edit/3JIbOfnyKiefS31N?open=lib%2Fscript.js

Модуль материалов для упаковки всех компонентов

import {NgModule} from '@angular/core';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatSelectModule} from '@angular/material/select';
import {MatFormFieldModule} from '@angular/material';

@NgModule({
  exports: [
    MatSelectModule,
    MatIconModule,
    MatInputModule,
    MatFormFieldModule,
  ]
})
export class MaterialModule {}

AppModule

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

import {GalleryComponent} from './gallery/gallery.component';
import {createCustomElement} from '@angular/elements';

import {ImageService} from './gallery/image.service';
import { ImageComponent } from './gallery/image/image.component';
import { ImageDetailsComponent } from './gallery/image-details/image-details.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MaterialModule} from './material.module';

@NgModule({
  declarations: [
    GalleryComponent,
    ImageComponent,
    ImageDetailsComponent
  ],
  imports: [
    MaterialModule,
    BrowserAnimationsModule,
    BrowserModule
  ],
  entryComponents: [GalleryComponent],
  providers: [ImageService],
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const custom = createCustomElement(GalleryComponent, { injector: this.injector });
    customElements.define('slim-gallery', custom);
  }
}

Стиль

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}

.basic-container {
  padding: 30px;
}

.version-info {
  font-size: 8pt;
  float: right;
}

Компонент шаблон html

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

person Bonfry    schedule 16.09.2019    source источник
comment
проверьте node_modules/@angular/material существует?   -  person Md Rafee    schedule 16.09.2019
comment
да потому что проект успешно компилируется   -  person Bonfry    schedule 16.09.2019
comment
Вам удалось заставить это работать?   -  person Brian Hadley    schedule 10.05.2021


Ответы (2)


Я столкнулся с той же проблемой. Попробуйте добавить эту строку (это для темы индиго) на свой app.component.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

А затем на вашем компоненте ts используйте инкапсуляцию none, как показано ниже:

@Component({
 ...,
 encapsulation: ViewEncapsulation.None
})
person Camilo Gutierrez    schedule 13.12.2019

Вы импортировали это:

import {MatFormFieldModule} from '@angular/material';

Но документация по API материалов определяет импорт следующим образом:

import {MatFormFieldModule} from '@angular/material/form-field';

В stackBlitz: https://stackblitz.com/edit/angular-3l12yn

person Beller    schedule 16.09.2019
comment
Если я удалю этот модуль, результат будет таким же. Проблема может быть в угловых элементах, но я не знаю, как решить - person Bonfry; 16.09.2019
comment
Вы бы загрузили в stackblitz? (plunker ничего не говорит) Я скопировал и вставил ваш код в stackBlitz, а затем изменил путь импорта и работал. Или удалите эту часть: ‹mat-label› Любимая еда ‹/mat-label› и добавьте заполнитель <mat-form-field> <mat-select placeholder="Favorite food"> <mat-option *ngFor="let food of foods" [value]="food.value"> {{food.viewValue}} </mat-option> </mat-select> </mat-form-field> - person Beller; 16.09.2019
comment
консоль сообщает: ERROR Error: Failed to execute 'define' on 'CustomElementRegistry': имя slim-gallery уже использовалось с этим реестром - person Beller; 16.09.2019
comment
index.html содержит: ‹slim-gallery› ‹/slim-gallery›, если вы отметите это: stackblitz.com / edit / angular-3l12yn вы можете увидеть ‹my-app› loading ‹/my-app›. Что относится к app.component.ts: @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) - person Beller; 16.09.2019
comment
Я думаю, что не могу реплицировать на stackbliz, потому что Angular создает две разные сборки (es5 и es2015), поэтому компонент slim-gallery объявляется дважды - person Bonfry; 17.09.2019
comment
1. Я сделал папку компонентов. 2. Я поместил туда файлы, относящиеся к галерее. 3. Я добавил маршрутизацию, галерея будет путем по умолчанию {path: '', component: GalleryComponent}. 4. добавлен компонент gallery.component и маршрутизация в app.module.ts. 5. app.component.ts получил import { Router } from '@angular/router'; и constructor(private router: Router){}. 6. app.component.html получил <router-outlet></router-outlet>. 7. удалите эту часть encapsulation: ViewEncapsulation.ShadowDom, из gallery.component.ts - person Beller; 17.09.2019