Angular Material Angular Material 핵심 테마를 찾을 수 없습니다.

Angular Material Angular Material 핵심 테마를 찾을 수 없습니다.

---

내 Angular2 프로젝트에서 https://material.angular.io/guide/getting-started 에서 최신 재질 플러그인을 설치 합니다. 다음 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';으로 내 구성 요소의 CSS 파일에 추가 합니다. 하지만 내 콘솔에서 Angular는 다음 오류를 보여줍니다.

material.es5.js : 148 Angular Material 핵심 테마를 찾을 수 없습니다. 대부분의 재료 구성 요소는 예상대로 작동하지 않을 수 있습니다. 더 많은 정보를 위해 테마 가이드를 참조하십시오 https://material.angular.io/guide/theming `

재료 구성 요소가 작동하지 않습니다. 뭐가 문제 야?

---

src 폴더 에있는 style.css에 아래 코드를 삽입 하십시오 .

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

prebuilt-themes 폴더 에서 CSS를 선택할 수 있습니다 .

---

다음 단계로 작업했습니다.

1)이 (또는 다른) 머티리얼 테마를 메인 CSS 파일로 가져옵니다 :

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

2) 또한이 기본 CSS 파일을 app.component 파일 에 등록해야 합니다.

@Component({
  selector: 'app',
  styleUrls: [
    './app.component.css'
  ]
})

3) 필요한 구성 요소가 app.module 파일의 @ angular / material 에서 가져 왔는지 다시 확인 하십시오.

import { MdCardModule, MdInputModule } from '@angular/material';

---

해당 코드를 angular-cli.json 파일에 넣으십시오.

"styles": [
    "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
  ],

그것은 나를 위해 잘 작동합니다

---

Karma로 테스트하는 동안 이런 일이 발생하면 파일 pattern의 files목록에 다음 을 추가 karma.config.js하십시오.

module.exports = function (config) {
   config.set({
    basePath: '',
    ...,
    files: [
        {pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: true}
    ],
    ...
}

자세한 내용은 여기를 참조하십시오. https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-include-core-theme-in-test-suite

---

Angular-CLI를 사용하는 경우 테마 파일 (예 : .angular-cli.json 파일의 "candy.scss")에 대한 참조를 만들어야합니다. 자세히보세요. * .scss가 있습니까? Sass 파일입니다. 여기에서 정보를 찾으십시오 : Angular Material 2 Theming instructions . 따라서 .angular-cli.json의 styles 속성 아래에 "themes / styles.css"옆에 "themes / candy.scss"를 추가하십시오. 내 프로젝트에 "테마"라는 폴더가 있습니다. styles.css와 candy.scss를 테마 폴더에 넣었습니다. 이제 Angular-CLI가 테마를 찾을 수 있습니다.

---

더하다:

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

너의 ~에게 style.css

---

다음 줄을 귀하의 src/styles.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

다른 CSS 클래스도 시도해 볼 수 있습니다. 사용 가능한 수업은 다음과 같습니다.

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

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

@import '~@angular/material/prebuilt-themes/purple-green.css';

---

위에서 언급 한 @import 문 외에도. 캡슐화를 추가했는지 확인하십시오 : ViewEncapsulation.None 내부 @Component 데코레이터.

@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None})

If you are looking for Angular Material setup for .Net core 1.1 or 2.0 Angular SPA visual studio template. Please find the well documented setup instruction details here.

---

worked for me adding in css section of index.html

 <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

As mentioned here here

---

Check any other @imports in your css or scss file. I experienced this issue and could not resolve it until other imports had been removed.

---

If you need only the material icons and you don't want import the whole material css use this, in your root css:

/** disable angular mat theme warning */
.mat-theme-loaded-marker {
  display: none;
}

---

Add @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to style.css of your angular project .

In case you want any other theme just folow the steps: Node modules -> @angular -> material -> prebuilt-themes ->

i)deeppurple-amber : @import "~@angular/material/prebuilt-themes/deeppurple-amber.css

ii)indigo-pink : @import "~@angular/material/prebuilt-themes/indigo-pink.css

iii)pink-bluegrey : @import "~@angular/material/prebuilt-themes/pink-bluegrey.css

iv)purple-green : @import "~@angular/material/prebuilt-themes/purple-green.css

And if you want to read you can visit :Theming your Angular Material app

참고URL : https://stackoverflow.com/questions/44230852/angular-material-could-not-find-angular-material-core-theme