Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Could not find Angular Material core theme angular 18

I am new to angular 18 and I am trying to use the angular material for a simple application development.

When I am adding the @angular/material with theme as azure-blue I am facing below challenges

  1. Even though CLI output says it updated the styles.scss, I don’t see any traces or updates happening in the styles.scss file
  2. When I tried setting up the custom theme (due to the above point), I am receiving below warning/error in the browser dev-tools console.

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

I tried following the steps provided in the angular material official documentation

Angular Material Theming Guide

Additionally I also tried adding @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; to my styles.scss file and tried updating the path in angular.json but no luck so far

Can anyone please help me getting rid of these problems and setting up the angular material theme.

Tags:

2

Answers


  1. 0

    I tried the exact steps, these are the things I noticed.

    The installer doesn’t modify the styles.scss instead its add the default style to angular.json

    ...
"styles": [
          "@angular/material/prebuilt-themes/azure-blue.css",
          "src/styles.scss"
        ],
        ...

    After this, including the default buttons html and ts, as shown below. It works. Working stackblitz demo below.

    Ts:

    import { Component } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatButtonModule, MatDividerModule, MatIconModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'test';
}

    Html:

    <section>
  <div class="example-label">Basic</div>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-button color="primary">Primary</button>
    <button mat-button color="accent">Accent</button>
    <button mat-button color="warn">Warn</button>
    <button mat-button disabled>Disabled</button>
    <a mat-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Raised</div>
  <div class="example-button-row">
    <button mat-raised-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="warn">Warn</button>
    <button mat-raised-button disabled>Disabled</button>
    <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Stroked</div>
  <div class="example-button-row">
    <button mat-stroked-button>Basic</button>
    <button mat-stroked-button color="primary">Primary</button>
    <button mat-stroked-button color="accent">Accent</button>
    <button mat-stroked-button color="warn">Warn</button>
    <button mat-stroked-button disabled>Disabled</button>
    <a mat-stroked-button href="https://www.google.com/" target="_blank"
      >Link</a
    >
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Flat</div>
  <div class="example-button-row">
    <button mat-flat-button>Basic</button>
    <button mat-flat-button color="primary">Primary</button>
    <button mat-flat-button color="accent">Accent</button>
    <button mat-flat-button color="warn">Warn</button>
    <button mat-flat-button disabled>Disabled</button>
    <a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Icon</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <button
        mat-icon-button
        aria-label="Example icon button with a vertical three dot icon"
      >
        <mat-icon>more_vert</mat-icon>
      </button>
      <button
        mat-icon-button
        color="primary"
        aria-label="Example icon button with a home icon"
      >
        <mat-icon>home</mat-icon>
      </button>
      <button
        mat-icon-button
        color="accent"
        aria-label="Example icon button with a menu icon"
      >
        <mat-icon>menu</mat-icon>
      </button>
      <button
        mat-icon-button
        color="warn"
        aria-label="Example icon button with a heart icon"
      >
        <mat-icon>favorite</mat-icon>
      </button>
      <button
        mat-icon-button
        disabled
        aria-label="Example icon button with a open in new tab icon"
      >
        <mat-icon>open_in_new</mat-icon>
      </button>
    </div>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">FAB</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <div class="example-button-container">
        <button
          mat-fab
          color="primary"
          aria-label="Example icon button with a delete icon"
        >
          <mat-icon>delete</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-fab
          color="accent"
          aria-label="Example icon button with a bookmark icon"
        >
          <mat-icon>bookmark</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-fab
          color="warn"
          aria-label="Example icon button with a home icon"
        >
          <mat-icon>home</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-fab
          disabled
          aria-label="Example icon button with a heart icon"
        >
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
    </div>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Mini FAB</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <div class="example-button-container">
        <button
          mat-mini-fab
          color="primary"
          aria-label="Example icon button with a menu icon"
        >
          <mat-icon>menu</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-mini-fab
          color="accent"
          aria-label="Example icon button with a plus one icon"
        >
          <mat-icon>plus_one</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-mini-fab
          color="warn"
          aria-label="Example icon button with a filter list icon"
        >
          <mat-icon>filter_list</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-mini-fab
          disabled
          aria-label="Example icon button with a home icon"
        >
          <mat-icon>home</mat-icon>
        </button>
      </div>
    </div>
  </div>
</section>

    Stackblitz has some problem running download the project and run it

    Stackblitz -> cd test -> npm i && npm run start

    Login or Signup to reply.
  2. 0

    There has been an issue with placing the M3-loaded marker in version 18.0.0 of Angular Material Components. The issue has been resolved in version 18.0.1 of of the library. You can find the corresponding issue, release log and the corresponding fix on GitHub.

    Try to update @angular/material to version 18.0.1 to resolve your problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search