javascript - Kunde inte hitta Angular Material kärntema angular 18

Jag är ny på Angular 18 och jag försöker använda Angular Material för enkel applikationsutveckling.

När jag lägger till @angular/material med temat som azure-blue stöter jag på följande utmaningar

1. Även om CLI-utdata säger att den uppdaterade styles.scss, ser jag inga spår eller uppdateringar som händer i styles.scss-filen
2. När jag försökte ställa in det anpassade temat (på grund av ovanstående punkt) får jag nedanstående varning/fel i webbläsarens utvecklarverktygskonsol.

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

Jag försökte följa stegen som anges i den officiella dokumentationen för Angular Material

Angular Material-temaguide

Dessutom försökte jag också lägga till @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; i min styles.scss-fil och försökte uppdatera sökvägen i angular.json men hittills utan framgång

Kan någon snälla hjälpa mig att bli av med dessa problem och sätta upp Angular Material-temat.

Svar #1

Det har varit ett problem med att placera M3-laddade markören i version 18.0.0 av Angular Material Components. Problemet har lösts i version 18.0.1 av biblioteket. Du kan hitta motsvarande problem, versionslogg och den motsvarande lösningen på GitHub.

Försök att uppdatera @angular/material till version 18.0.1 för att lösa ditt problem.

Svar #2

Jag provade exakt samma steg, det här är sakerna jag lade märke till.

Installationsprogrammet ändrar inte styles.scss, istället lägger det till standardstilen i angular.json:

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

Efter detta, inklusive standardknappens HTML och TS, som visas nedan. Det finns en fungerande Stackblitz-demo nedan.

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 har vissa problem med att köra; ladda ner projektet och kör det.

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