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

Issue

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

Solution

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.

Answered By - A.Y