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

Question

I used angular13. and Vs code. 'mat-sidenav-container' is not a known element 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" 'router-outlet' is not a known element: etc.. I got some errors in this app.component.html. I've checked module.ts and install. But, I can build and ng serve, I got errors though.

I got errors about router-outlet, ngif, mat-sidenav-container. so, I don't know how to solve.

I can build, so template's errors? like eslint...

Please tell me how to fix.

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 { }

Directory structure

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

some errors

'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

I had soloved this problem!! I developed the app in vscode with using angular. Now, I uninstalled the plugin, "angular language service" And then, I don't get all errors now!! I had the problem in vscode plugin.

Answer 2

Try importing MatSidenav directly inside your component:

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

Answer 3

This error looks like vs code cannot recognize the module. As official recommandation. You can follow the guide to reinstall the material https://v5.material.angular.io/guide/getting-started Then import following module in each module you defined.

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