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})

.Net core 1.1 또는 2.0 Angular SPA Visual Studio 템플릿에 대한 Angular Material 설정을 찾고있는 경우. 여기 에서 잘 문서화 된 설치 지침 세부 정보를 찾으 십시오 .

머티리얼 아이콘 만 필요하고 전체 머티리얼 CSS를 가져 오지 않으려면 루트 CSS에서 다음을 사용하십시오.

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

index.html의 CSS 섹션에서 나를 위해 일했습니다.

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

여기 에서 언급했듯이

css 또는 scss 파일에서 다른 @imports를 확인하십시오. 이 문제가 발생하여 다른 가져 오기가 제거 될 때까지 해결할 수 없습니다.

@import "~@angular/material/prebuilt-themes/indigo-pink.css" 추가 ; 각 프로젝트의 style.css에.

다른 테마를 원하는 경우 다음 단계를 따르십시오. 노드 모듈-> @angular-> 재료-> 미리 빌드 된 테마->

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

ii) 인디고-핑크 : @import "~@angular/material/prebuilt-themes/indigo-pink.css

iii) 핑크-블루 그레이 : @import "~@angular/material/prebuilt-themes/pink-bluegrey.css

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

그리고 읽으려면 다음을 방문하십시오 . Angular Material 앱 테마 지정

나는 당신과 같은 오류가 있었고 주석 중 하나에서 해결책을 찾았습니다. 이 솔루션이 저에게 효과적 이었으므로 답변으로 게시하고 싶습니다.

프로젝트가 이미 실행 중이고 나중에 재료 구성 요소를 설치 한 경우 먼저 프로젝트를 다시 시작해야합니다. 그것만으로도 이미 고칠 수 있습니다.

더하다

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

받는 있는 style.css 파일, 또는 추가

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

index.html 파일 의 헤드 섹션

얼마나 많은 사람들이 이것이 유용하다고 생각하는지 모르겠지만 스택 오버플로에서 다른 솔루션을 시도한 후 서버를 다시 시작하면 작동했습니다.