programing

'mat-form-field'는 알려진 요소가 아닙니다. - Angular 5 & Material 2

skycolor 2023. 7. 26. 21:45
반응형

'mat-form-field'는 알려진 요소가 아닙니다. - Angular 5 & Material 2

사용하려고 합니다.<mat-form-field>Material2를 사용하는 Angular 프로젝트에서 하지만 벽에 부딪혔습니다.

아래 오류 메시지가 표시됩니다.

Uncaught Error: Template parse errors:
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-form-field>
  <input matInput placeholder="Simple placeholder" required>
</mat-form-field>"): ng:///MaterialModule/SearchComponent.html@0:0
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24660)
    at JitCompiler._parseTemplate (compiler.js:34471)
    at JitCompiler._compileTemplate (compiler.js:34446)
    at eval (compiler.js:34347)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34347)
    at eval (compiler.js:34217)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34216)

이게 제 코드입니다.

app.s.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';

import {
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule
} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { YahooService } from './yahoo.service';
import { SearchComponent } from './search/search.component';

@NgModule({
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
  ],
  declarations: [
    SearchComponent,
  ],
})
export class MaterialModule {};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MaterialModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
  ],
  providers: [
    YahooService,
  ],
  bootstrap: [
    AppComponent,
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
  ],
})
export class AppModule { }

search.component.vmdk

<mat-form-field>
   <input matInput placeholder="Simple placeholder" required>
</mat-form-field>

search.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  options: FormGroup;

  constructor(fb: FormBuilder) {
    this.options = fb.group({
      floatLabel: 'never',
    });
  }

  ngOnInit() {
  }

}

꾸러미제이손

{
  "name": "forecast",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/schematics": "0.0.40",
    "@angular/animations": "^5.1.3",
    "@angular/cdk": "^5.0.3",
    "@angular/common": "^5.1.3",
    "@angular/compiler": "^5.1.3",
    "@angular/core": "^5.1.3",
    "@angular/forms": "^5.1.3",
    "@angular/http": "^5.1.3",
    "@angular/material": "^5.0.3",
    "@angular/platform-browser": "^5.1.3",
    "@angular/platform-browser-dynamic": "^5.1.3",
    "@angular/router": "^5.1.3",
    "axios": "^0.17.1",
    "body-parser": "^1.18.2",
    "core-js": "^2.5.3",
    "express": "^4.16.2",
    "node-sass": "^4.7.2",
    "nodemon": "^1.14.7",
    "q": "^1.5.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.3",
    "@angular/compiler-cli": "^5.1.3",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.4.0"
  }
}

NgModule에서만 내보내고 있으므로 가져오기도 해야 합니다.

@NgModule({
  imports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
 ]
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
  ],
  declarations: [
    SearchComponent,
  ],
})export class MaterialModule {};

더 나은

const modules = [
        MatButtonModule,
        MatFormFieldModule,
        MatInputModule,
        MatRippleModule
];

@NgModule({
  imports: [...modules],
  exports: [...modules]
  ,
})export class MaterialModule {};

갱신하다

모든 각도 종속성을 가져오기 전에 각도 재료에 따라 구성 요소(검색 구성 요소)를 선언합니다.

맘에 들다BrowserAnimationsModule

재료 모듈 또는 재료 모듈 이전으로 이동해 보십시오.

당신은 그것을 사용하려고 합니다.MatFormFieldComponent에SearchComponent하지만 당신은 그것을 수입하지 않습니다.MatFormFieldModule(수출 대상MatFormFieldComponent내보내기만 하면 됩니다.

당신의.MaterialModule가져올 필요가 있습니다.

@NgModule({
  imports: [
    MatFormFieldModule,
  ],
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
  ],
  declarations: [
    SearchComponent,
  ],
})
export class MaterialModule { }

'mat-form-field'를 사용하는 경우 MatInputModule도 가져와야 합니다.

import { 
    MatToolbarModule, 
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule ,
    MatStepperModule,
    MatInputModule
} from '@angular/material';

저도 이런 문제가 있었어요.알고 보니 app.module.ts에 구성 요소 중 하나를 포함하는 것을 잊었습니다.

추가했는지 확인합니다.import {MatInputModule} from '@angular/material/input'; 수입 명세서로서

매트 입력 모듈에 문제가 있습니다.

exports: [
    MatInputModule
  ]

각도 응용 프로그램에서 MatAutocompleteModule을 사용하는 경우 app.module.ts에서도 입력 모듈을 가져와야 합니다.

아래를 가져오십시오.

'@angular/material'에서 {MatInputModule}을(를) 가져옵니다.

@NgModule({
  declarations: [
    SearchComponent
  ],
  exports: [
    CommonModule,
    MatInputModule,
    MatButtonModule,
    MatCardModule,
    MatFormFieldModule,
    MatDialogModule,
  ]
})
export class MaterialModule { }

또한, 다음을 가져오는 것을 잊지 마십시오.MaterialModule의 수입품열에.AppModule.

가져올 네임스페이스 확인

import { MatDialogModule } from "@angular/material/dialog";
import { MatCardModule } from "@angular/material/card";
import { MatButtonModule } from "@angular/material/button";

모듈 경로를 가져온 후 가져오기 배열에서 구성 요소 이름 가져오기

  imports: [
      MatDialogModule,
      MatCardModule,
      MatButtonModule
]

저의 경우, 이전 프로젝트에서 생성한 구성 요소의 전체 디렉터리를 새 프로젝트로 복사한 후 app.module.ts에 구성 요소를 포함하는 것을 잊어버렸기 때문에 이 문제가 발생했습니다.

(이것이 누군가의 시간을 많이 절약해주기를 바랍니다.스택 오버플로가 나에게 여러 번 그랬던 것처럼

저도 비슷한 문제에 직면했습니다.제 문제는 디렉터리에서만 구성 요소를 삭제했고 app.module의 선언에 구성 요소 이름이 있었기 때문입니다.제가 app.module에서도 구성요소를 제거했을 때, 제 문제는 즉시 해결되었습니다.다른 사람에게 도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/48100238/mat-form-field-is-not-a-known-element-angular-5-material2

반응형

'programing' 카테고리의 다른 글

SpringBOOT에서 JVM 인수를 전달하는 방법  (0) 2023.07.26
sql 쿼리 - 대소문자 구분 함수를 사용합니다.  (0) 2023.07.26
jQuery Simple modal을 닫으려면 어떻게 해야 합니까?  (0) 2023.07.26
이벤트 이미터로 매개 변수 전달  (0) 2023.07.26
Android "..."를 줄임표 문자로 바꿉니다.  (0) 2023.07.26

'programing'의 다른글

  • 현재글'mat-form-field'는 알려진 요소가 아닙니다. - Angular 5 & Material 2

관련글

댓글

티스토리툴바