Angular Material Sidenav 模块无法识别

Posted 2023-02-18

【中文标题】Angular Material Sidenav 模块无法识别

【英文标题】：Angular Material Sidenav Module is not recognised

【发布时间】：2020-10-24 09:53:30

【问题描述】：

我正在使用 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>

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

【问题讨论】：

如何重启你的IDE？

Angular 本身也不会编译我的代码。正如我所说，由于某种原因，所有材料侧导航组件都没有导入，正如我刚刚注意到的，其他一些材料模块遇到相同的 “不是 Angular 模块” 问题，但其中一些可以工作非常好（图标模块和按钮模块）。所以据我了解，这不是 IDE 问题

【参考方案1】：

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

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

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