无法在角度 6 中实现材料视图低于错误

Posted 2023-03-13

【中文标题】无法在角度 6 中实现材料视图低于错误

【英文标题】：Unable to implement material view in the angular 6 getting below error

【发布时间】：2019-04-25 09:54:04

【问题描述】：

我刚刚使用 Angular 6 创建了一个页面，我想为 UI 实现材质视图。在实施时，我收到以下错误。

我尝试添加 material.js 库，但没有成功

未捕获的错误：模板解析错误：

 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("eld>
    <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
    [ERROR ->]<mat-icon matSuffix (click)="hide = !hide">hide ? 'visibility_off' : 'visibility'</mat-icon>
  </"): ng:///AppModule/ApplicationComponent.html@4:4
'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. ("<h1>Products List</h1>
<div class="example-container">
  [ERROR ->]<mat-form-field>
    <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 't"): ng:///AppModule/ApplicationComponent.html@2:2
    at syntaxError (compiler.js:2547)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:19495)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:25041)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:25028)
    at compiler.js:24971
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24971)
    at compiler.js:24881
    at Object.then (compiler.js:2538)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24880)

【问题讨论】：

Template parse errors: 'mat-icon' is not a known element的可能重复

我已经尝试添加它，但仍然出现错误。 src/app/app.module.ts(8,33) 中的错误：错误 TS2307：找不到模块“@angular/material/button”。 src/app/app.module.ts(10,31)：错误 TS2307：找不到模块“@angular/material/icon”。我在创建项目时运行了 npm install .. 我的项目路径中有所有依赖项

你能清楚地分享你所有的代码吗？

【参考方案1】：

在 Angular 6 中，您无需添加 .js 文件即可使用 Angular 材料，您只需通过 npm 安装即可。尝试关注angular material getting started guide，它应该可以工作。