模板解析错误：'mat-sidenav-container'不是已知元素，关于路由器出口，ngif

Question

我使用了angular13。Vs code。"mat-sidenav-container"不是已知元素属性绑定ngIf不会被任何嵌入模板上的指令使用。确保属性名拼写正确，并且所有指令都列在"@NgModule.declarations"'router-outlet'不是已知元素:等。我在这个app.component.html中出现了一些错误。我检查了模块。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无法识别模块。作为官方推荐。您可以按照指导重新安装材料https://v5.material.angular.io/guide/getting-started然后在您定义的每个模块中导入以下模块。

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

Answer 3

我已经解决了这个问题!!我在vscode中使用angular开发了这个应用程序。现在，我卸载了插件"angular language service"。然后，我现在没有得到所有的错误!!我在vscode插件中有这个问题。