Angular Elements doesn't include Material Theme css properly

Question

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%2Fscript.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>

check node_modules/@angular/material exists?

Md Rafee
– Md Rafee

2019-09-16 16:38:57 +00:00
Commented Sep 16, 2019 at 16:38 — Md Rafee
– Md Rafee, Commented Sep 16, 2019 at 16:38
yes because the project compiles successfullly

Bonfry
– Bonfry

2019-09-16 16:55:22 +00:00
Commented Sep 16, 2019 at 16:55 — Bonfry
– Bonfry, Commented Sep 16, 2019 at 16:55
were you able to get this to work?

Brian Hadley
– Brian Hadley

2021-05-10 16:28:21 +00:00
Commented May 10, 2021 at 16:28 — Brian Hadley
– Brian Hadley, Commented May 10, 2021 at 16:28

Camilo Gutierrez · Accepted Answer · 2019-12-13 15:11:54Z

4

I was facing the same issue. Try adding this line (this is for indigo theme) on you app.component.css

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

And then on your component ts use encapsulation none, like follows:

@Component({
 ...,
 encapsulation: ViewEncapsulation.None
})

answered Dec 13, 2019 at 15:11

Camilo Gutierrez

411 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user18568874 · Accepted Answer · 2022-03-28 08:12:52Z

0

In case someone is interested in the solution. My problmen was caused by ngZone: 'noop' in the main.ts file. It disables change detection.

So changing this

platformBrowserDynamic() .bootstrapModule(AppModule, { ngZone: 'noop' }) .catch(err => console.error(err)); to this

platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err) => console.error(err)); solved my problem with Angular Material Elements.

answered Mar 28, 2022 at 8:12

user18568874

Comments

Robin De Schepper · Accepted Answer · 2019-09-16 18:25:57Z

-1

You have imported this:

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

But the Material API documentation specifies the import like this:

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

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

edited Sep 16, 2019 at 18:25

Robin De Schepper

6,5345 gold badges44 silver badges66 bronze badges

answered Sep 16, 2019 at 16:51

Beller

8881 gold badge6 silver badges19 bronze badges

6 Comments

Bonfry Over a year ago

If I remove that module, the result is the same. The problem could be Angular Elements but I don't know how resolve

Beller Over a year ago

Would you upload to stackblitz? (plunker doesn't says anything) I have copy&paste your code to stackBlitz and after that change the import path and works. Or remove this part : <mat-label>Favorite food</mat-label> and add placeholder

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

Beller Over a year ago

console says: ERROR Error: Failed to execute 'define' on 'CustomElementRegistry': the name "slim-gallery" has already been used with this registry

Beller Over a year ago

index.html contains: <slim-gallery></slim-gallery> if you check this: stackblitz.com/edit/angular-3l12yn you can see <my-app>loading</my-app>. Which refers to app.component.ts: @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] })

Bonfry Over a year ago

I think I can't replicate on stackbliz because Angular create 2 different build(es5 and es2015), so the slim-gallery component is declared twice

|

Collectives™ on Stack Overflow

Angular Elements doesn't include Material Theme css properly

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related