Template Parse Error: 'mat-sidenav-container' is not a known element, and about router-outlet, ngif

Question

我用的是angular13。和VS代码。 'mat-sidenav-container' 不是已知元素属性绑定 ngIf 未被嵌入式模板上的任何指令使用。确保属性名称拼写正确并且所有指令都列在“@NgModule.declarations”中 'router-outlet' 不是已知元素： ETC.. 我在这个 app.component.html 中遇到了一些错误。我检查了 module.ts 并安装了。但是，我可以构建和 ng 服务，但我遇到了错误。

我收到关于 router-outlet、ngif、mat-sidenav-container 的错误。所以，我不知道怎么解决。

我可以构建，所以模板错误？像 eslint...

请告诉我如何解决。

app.component.html

<!-- Sidenav container -->
<mat-sidenav-container>
  <!-- Side navigation -->
  <mat-sidenav #sidenav mode="side">
    <app-sidenav *ngIf="!this.isSignInPage()"></app-sidenav>
  </mat-sidenav>

  <!-- Main contents -->
  <mat-sidenav-content>
    <!-- Loading Spinner -->
    <app-loading></app-loading>

    <!-- Wrapper of body -->
    <div class="body-wrapper">
      <!-- Header -->
      <app-header *ngIf="!this.isSignInPage()"></app-header>

      <!-- Router -->
      <router-outlet></router-outlet>

      <!-- Footer -->
      <app-footer *ngIf="!this.isSignInPage()"></app-footer>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { MaterialModule } from './material/material.module';
import { NgxTranslateModule } from './ngx-translate/ngx-translate.module';
import { PagesModule } from './pages/pages.module';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    NgxTranslateModule,
    CoreModule,
    SharedModule,
    PagesModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

material.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatTableModule } from '@angular/material/table';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatButtonModule,
    MatButtonToggleModule,MatCardModule,MatCheckboxModule,MatDatepickerModule,MatDialogModule,MatDividerModule,MatFormFieldModule,MatGridListModule,MatIconModule,MatInputModule,MatListModule,MatMenuModule,MatNativeDateModule,MatPaginatorModule,MatProgressSpinnerModule,MatRadioModule,MatSelectModule,MatSidenavModule,MatTableModule,MatToolbarModule,MatTooltipModule
  ],
  exports: [MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatDatepickerModule, MatDialogModule, MatDividerModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatRadioModule, MatSelectModule, MatSidenavModule, MatTableModule, MatToolbarModule, MatTooltipModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MaterialModule { }

目录结构

Project
 |
 ---src
     |
     ---app
        |
        ---core
        ---material
           |
           ---material.module.ts
        ---ngx-translate
        ---pages
        ---shared
        ---app-routing.module.ts
        ---app.component.ts
        ---app.module.ts
     ---assets
     ---environments

一些错误

'mat-sidenav-container' is not a known element:
1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ng

Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".ng

'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ng

Answer 1

尝试在您的组件中直接导入 MatSidenav：

import {MatSidenav} from '@angular/material/sidenav';

Answer 2

这个错误看起来是 vs code 无法识别模块。作为官方推荐。您可以按照指南重新安装 material https://v5.material.angular.io/guide/getting-started 然后在您定义的每个模块中导入以下模块。

import {MatSidenavModule} from '@angular/material/sidenav';

Answer 3

我已经解决了这个问题！！我在 vscode 中使用 angular 开发了该应用程序。现在，我卸载了插件“angular 语言服务” 然后，我现在没有收到所有错误！！我在 vscode 插件中遇到了问题。

Template Parse Error: 'mat-sidenav-container' is not a known element, and about router-outlet, ngif

Template Parse Error: 'mat-sidenav-container' is not a known element, and about router-outlet, ngif

javascript

typescript

angular