admin管理员组

文章数量:1435822

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 ponents may not work as expected. For more info refer to the theming guide:

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.

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

  • javascript
  • angular
  • typescript
  • angular-material
  • angular18
Share Improve this question asked May 29, 2024 at 12:47 Dhyey DaveDhyey Dave 551 gold badge1 silver badge9 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 1

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.

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

The installer doesn't modify the styles.scss, instead it adds 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. There's a 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.ponent.html',
  styleUrl: './app.ponent.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./" 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./" 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./" 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./" 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

本文标签： javascriptCould not find Angular Material core theme angular 18Stack Overflow

版权声明：本文标题：javascript - Could not find Angular Material core theme angular 18 - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745641562a2667889.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。