Angular 材料不适用于 Angular13答案

【问题标题】：Angular material not working on Angular13Angular 材料不适用于 Angular13
【发布时间】：2022-09-26 18:26:41
【问题描述】：

我在我的项目上安装了 Angular Material 并且没有加载。

我尝试将样式表导入全局 Style.css

重新启动服务器

但是 Angular Material 没有更新。

我没有任何线索。

下面我也添加了我的 Package.Json 文件

我的 HTML 代码


<mat-form-field>
  <textarea MatInput rows=\"6\" [(ngModel)]=\"valueEntered\"></textarea>
</mat-form-field>

<hr />
<button (click)=\"onSave()\">Save</button>
<p>{{ newPost }}</p>

应用模块代码

import { NgModule } from \'@angular/core\';
import { BrowserModule } from \'@angular/platform-browser\';

import { AppRoutingModule } from \'./app-routing.module\';
import { AppComponent } from \'./app.component\';

import { postCreateComponent } from \'./posts/post-create/post-create.component\';

import { FormsModule } from \'@angular/forms\';
import { BrowserAnimationsModule } from \'@angular/platform-browser/animations\'; 
import {MatInputModule} from \'@angular/material/input\';

@NgModule({
  declarations: [
    AppComponent,
    postCreateComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule
  ],
  exports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

打包 Json 文件

\"dependencies\": {
    \"@angular/animations\": \"~13.2.0\",
    \"@angular/cdk\": \"^13.3.9\",
    \"@angular/common\": \"~13.2.0\",
    \"@angular/compiler\": \"~13.2.0\",
    \"@angular/core\": \"~13.2.0\",
    \"@angular/forms\": \"~13.2.0\",
    \"@angular/material\": \"^13.3.9\",
    \"@angular/platform-browser\": \"~13.2.0\",
    \"@angular/platform-browser-dynamic\": \"~13.2.0\",
    \"@angular/router\": \"~13.2.0\",
    \"rxjs\": \"~7.5.0\",
    \"tslib\": \"^2.3.0\",
    \"zone.js\": \"~0.11.4\"
  },

你怎么知道不是？你检查过 package.json 中的版本吗？您在安装或运行时是否有任何错误消息等
不，我在安装时没有收到任何错误。在我写了这段代码之后。开始服务。我无法在浏览器中看到那里的材料设计
我正在使用 Angular 13.0
运行时也没有出现任何错误

标签： angular angular-material

【解决方案1】：

应该做ng add @angular/material 并添加到NgModule MatFormFieldModule 和BrowserAnimationsModule 的导入和导出。

【讨论】：

添加了从“@angular/material/form-field”导入 {MatFormFieldModule}；还是一样
可以肯定的是，还要再次执行npm install。

【解决方案2】：

我只注意到一件事，以防其他人错过它：HTML 上的“MatInput”需要是驼峰式“matInput”。

【讨论】：