Angular Elements doesn't include Material Theme css properly

I have included Angular Material in my angular element project. I have included all the references how the documentation suggests, but when I build seems like angular the material theme isn't included at all.

This is the link for watching what I mean: https://next.plnkr.co/edit/3JIbOfnyKiefS31N?open=lib/script.js

Material module for wrapping all the components

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);
}
}



The Style

@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;
}



Component template 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>

Continue reading...