각도 재료가 각도 재료 코어 테마를 찾을 수 없습니다.

각도 재료가 각도 재료 코어 테마를 찾을 수 없습니다.

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 폴더에 있는 styles.css에 아래 코드를 삽입하십시오.

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

미리 작성된 테마 폴더에서 원하는 CSS를 선택할 수 있습니다.

. angular-cli.json 파일입니다.

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

저한테는 잘 됩니다.

다음과 같은 단계로 작동하게 되었습니다.

이(또는 다른) 재료 테마를 기본 CSS 파일로 가져옵니다.

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

또한 이 메인 CSS 파일을 app.component 파일에 등록해야 합니다.

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

필요한 구성 요소를 app.module 파일의 @angular/material에서 가져오는지 다시 확인합니다.

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

다행을에다니합추에 다음 합니다.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';

Karma를 사용하여 테스트하는 동안 이 문제가 발생하면 다음을 추가합니다.pattern에▁files귀하의 목록에 합니다.karma.config.jsjava.

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-including-core-theme-in-test-suite

추가:

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

의 신에게에.style.css

Angular-CLI를 사용하는 경우 .angular-cli.json 파일의 "candy.scss"와 같이 테마 파일을 참조해야 합니다.잘 보세요. *.scss가 있나요?Sass 파일입니다.자세한 내용은 여기를 참조하십시오.각도 재료 2 주제 지정 지침.따라서 .angular-cli.json의 styles 속성 아래에 "themes/candy.scss"를 "themes/styles.css" 옆에 추가합니다.프로젝트에 "테마"라는 폴더가 있습니다.테마 폴더에 styles.css와 candy.scss를 넣었습니다.이제 Angular-CLI에서 테마를 찾을 수 있습니다.

위에 언급된 @import 문 외에도.캡슐화를 추가해야 합니다.보기 캡슐화.@Component decorator 내부에 없음.

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

에 대한 각도 재료 설정을 찾고 있는 경우.Netcore 1.1 또는 2.0 Angular SPA 비주얼 스튜디오 템플릿.잘 문서화된 설치 지침 세부 정보는 여기에서 확인하십시오.

재료 아이콘만 필요하고 전체 재료 CSS를 가져오지 않으려면 루트 CSS에서 다음을 사용합니다.

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

더하다

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

style.css 파일에 또는 추가

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

index.dll 파일의 머리 부분에

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

인덱스의 css 섹션을 추가하는 것이 나를 위해 일했습니다.

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

여기서 언급한 바와 같이

css 또는 scss 파일에서 다른 @imports를 확인합니다.저는 이 문제를 경험했고 다른 수입품들이 제거될 때까지 해결할 수 없었습니다.

@import "~@angular/material/pre-built-themes/indigo-pink.css";를 각 프로젝트의 style.css에 추가합니다.

다른 테마를 원하는 경우 다음 단계를 수행합니다.노드 모듈 -> @angular -> 자료 -> 사전 구축된 테마 ->

딥퍼플-디버블 : @import "~@publish/소재/프리빌트(prebuilt)-디버블(published

ii)인디고-핑크 : @수입 "~@px/소재/프리빌트(prebuilt)인디고-핑크.css

iii)핑크-블루그레이 : @수입 "~@prefilt/material/prebuilt-blue grey."

iv)초록색 : @수입 "~@초록색/소재/프리빌트(prebuilt-built)/초록색."

그리고 읽고 싶다면 다음을 방문할 수 있습니다.Angular Material 앱을 지정합니다.

저도 당신과 같은 오류가 있었고 댓글 중 하나에서 해결책을 찾았습니다.그 해결책이 저에게 효과가 있었기 때문에, 저는 그것을 답변으로 올리고 싶습니다.

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

재료 설계 모듈에는 scss가 포함되어 있습니다. 다음 두 단계에서 css 파일을 scss로 마이그레이션합니다.

1. npm i 스키마-scss-messages
2. ng 스키마-scss-vmdk:scss-vmdk

이것이 모두에게 효과가 있기를 바랍니다 :)

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