时间戳

首页 > 解决方案 > Angular Material Sidenav 模块无法识别

angular - Angular Material Sidenav 模块无法识别

问题描述

我正在使用 Angular 9.1.11 和 Angular Material 9.2.4 。当我尝试导入MaterialSidenavModule时遇到此问题，因此我可以使用mat-sidenav-container等组件。

这是我的 app.module.ts 文件：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
import { SidemenuComponent } from './sidemenu/sidemenu.component';
import { MatSidenavModule } from '@angular/material/sidenav';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SidemenuComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatButtonModule,
    MatSidenavModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题是我的 IDE (WebStorm) 告诉我 MatSidenavModule 不是 Angular 模块并且不会导入它。我的 sidenav 组件也有错误，我想使用的所有材料 sidenav 组件都不是有效的 html 标签...

组件的 HTML 模板：

<mat-sidenav-container class="sidemenu-container">
  <mat-sidenav mode="side" [(opened)]="opened">
    Sidenav content
  </mat-sidenav>

  <mat-sidenav-content>

    <p>Dummy text</p>

  </mat-sidenav-content>

</mat-sidenav-container>

我所有的其他导入工作都很好，但这个不会停止破坏我的应用程序。我在哪里做错了？

标签： angulartypescriptangular-materialangular9mat-sidenav

解决方案

太好了，我刚刚解决了我的问题。

显然，如果在您的项目中禁用了Ivy（ Angular 自版本9以来的新编译和渲染管道）， Angular Material 9+将无法工作（哎呀，我猜）。

我再次将Material包从版本 9 更新到了 10，重新启用了Ivy，之后该应用程序似乎运行得非常好。

推荐阅读