javascript - Kunne ikke finne Angular Material kjerne tema angular 18

Jeg er ny på Angular 18, og jeg prøver å bruke Angular Material for enkel applikasjonsutvikling.

Når jeg legger til @angular/material med tema som azure-blue, møter jeg følgende utfordringer

1. Selv om CLI-utdata sier at den oppdaterte styles.scss, ser jeg ingen spor eller oppdateringer som skjer i styles.scss-filen
2. Når jeg prøvde å sette opp det tilpassede temaet (på grunn av punktet ovenfor), får jeg følgende advarsel/feil i nettleserens utviklerverktøy-konsoll.

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

Jeg prøvde å følge trinnene som ble gitt i den offisielle dokumentasjonen til Angular Material

Angular Material-tema guide

I tillegg prøvde jeg også å legge til @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; i filen min styles.scss og prøvde å oppdatere banen i angular.json, men uten hell så langt

Kan noen vennligst hjelpe meg med å bli kvitt disse problemene og sette opp Angular Material-temaet.

Svar #1

Det har vært et problem med å plassere M3-lastet markør i versjon 18.0.0 av Angular Material Components. Problemet er løst i versjon 18.0.1 av biblioteket. Du kan finne den tilsvarende saken, utgivelsesloggen og den tilsvarende løsningen på GitHub.

Prøv å oppdatere @angular/material til versjon 18.0.1 for å løse problemet ditt.

Svar #2

Jeg prøvde de nøyaktige stegene, dette er tingene jeg la merke til.

Installasjonsprogrammet endrer ikke styles.scss, i stedet legger det til standardstilen i angular.json:

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

Etter dette, inkludert standard knappene html og ts, som vist nedenfor. Det er en fungerende Stackblitz-demo nedenfor.

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 et problem med å kjøre; last ned prosjektet og kjør det.

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