バージョン8.2.14のAngularMaterialの問題
Aug 20 2020
編集（2020年8月20日14：12h）：
HTML解析により、詳細がわかります。
Uncaught Error: Template parse errors:
'mat-card-title' is not a known element:
1. If 'mat-card-title' is an Angular component, then verify that it is part of this module.
2. If 'mat-card-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<mat-card>
<mat-card-header>
[ERROR ->]<mat-card-title>Login</mat-card-title>
</mat-card-header>
<mat-card-content>
"): ng:///AppModule/LoginComponent.html@11:4
'mat-card-header' is not a known element:
1. If 'mat-card-header' is an Angular component, then verify that it is part of this module.
2. If 'mat-card-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
更新：
私は問題のほとんどを修正します。今の場合は@angular / cdkパッケージについてです：
node_modules/@angular/cdk/tree/padding.d.ts:36:9 - error TS1086: An accessor cannot be declared in an ambient context.
36 set indent(indent: number | string);
~~~~~~
node_modules/@angular/cdk/tree/toggle.d.ts:17:9 - error TS1086: An accessor cannot be declared in an ambient context.
17 get recursive(): boolean;
~~~~~~~~~
node_modules/@angular/cdk/tree/toggle.d.ts:18:9 - error TS1086: An accessor cannot be declared in an ambient context.
18 set recursive(value: boolean);
~~~~~~~~~
node_modules/@angular/cdk/tree/tree.d.ts:37:9 - error TS1086: An accessor cannot be declared in an ambient context.
37 get dataSource(): DataSource<T> | Observable<T[]> | T[];
~~~~~~~~~~
node_modules/@angular/cdk/tree/tree.d.ts:38:9 - error TS1086: An accessor cannot be declared in an ambient context.
38 set dataSource(dataSource: DataSource<T> | Observable<T[]> | T[]);
~~~~~~~~~~
node_modules/@angular/cdk/tree/tree.d.ts:103:9 - error TS1086: An accessor cannot be declared in an ambient context.
103 get data(): T;
~~~~
node_modules/@angular/cdk/tree/tree.d.ts:104:9 - error TS1086: An accessor cannot be declared in an ambient context.
104 set data(value: T);
~~~~
node_modules/@angular/cdk/tree/tree.d.ts:106:9 - error TS1086: An accessor cannot be declared in an ambient context.
106 get isExpanded(): boolean;
~~~~~~~~~~
node_modules/@angular/cdk/tree/tree.d.ts:107:9 - error TS1086: An accessor cannot be declared in an ambient context.
107 get level(): number;
CMDコンソール
npm WARN [email protected] requires a peer of jasmine-core@>=3.5 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of @angular/core@^10.0.0 || ^11.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of @angular/common@^10.0.0 || ^11.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
そのための解決策はありますか？ありがとう！:)
このテーマに関するこれらの質問を参照してください：@ angular / material / index.d.ts 'はモジュールではありません、プロジェクトにAngular Materialをインポートする方法は？、そして次のようにモジュールを実装すると、コンパイラは私にエラーを出しました。
angle-material.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MatCardModule,
MatDialogModule,
MatMenuModule,
MatButtonModule,
MatToolbarModule,
MatIconModule,
MatBadgeModule,
MatSidenavModule,
MatListModule,
MatGridListModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatRadioModule,
MatDatepickerModule,
MatNativeDateModule,
MatChipsModule,
MatTooltipModule,
MatTableModule,
MatPaginatorModule,
MatProgressSpinnerModule
} from '@angular/material';
@NgModule({
imports: [
MatCardModule,
MatDialogModule,
MatMenuModule,
MatProgressSpinnerModule,
CommonModule,
MatButtonModule,
MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatBadgeModule,
MatListModule,
MatGridListModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatRadioModule,
MatDatepickerModule,
MatNativeDateModule,
MatChipsModule,
MatTooltipModule,
MatTableModule,
MatPaginatorModule
],
exports: [
MatCardModule,
MatDialogModule,
MatMenuModule,
MatProgressSpinnerModule,
MatButtonModule,
MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatBadgeModule,
MatListModule,
MatGridListModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatRadioModule,
MatDatepickerModule,
MatChipsModule,
MatTooltipModule,
MatTableModule,
MatPaginatorModule
],
providers: [
MatDatepickerModule,
]
})
export class AngularMaterialModule { }
最近、package.jsonに次のように追加して、node_modules / @ angular / material /index.d.tsと互換性のある古いバージョンを配置しました。
"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"chokidar": "^3.4.2",
"core-js": "^3.6.5",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
最後に、app.module.tsに依存関係ファイルを追加しました。
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { LogoutComponent } from './logout/logout.component';
import { AngularMaterialModule } from './angular-material.module';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import { HeaderComponent } from './header/header.component';
import { UserComponent } from './user/user.component';
import { FooterComponent } from './footer/footer.component';
import {BasicAuthHtppInterceptorService} from './service/basic-auth-interceptor.service';
私のアプリの構造は次のようになっています。
Angularアプリの構造
このバージョンでHTMLタグを表示するにはどうすればよいですか？前もって感謝します ：）
回答
HrishikeshKale Aug 20 2020 at 19:02
package.jsonによると、Angular 8.3を使用しており、@ angular / cdk @ 10.1.3があります。を使用してangular / cdkバージョンをダウングレードできます
npm i @angular/[email protected]
または、以下を実行して、Angularバージョンをv9にアップグレードできます。
ng update @angular/core @angular/cli
これにより、ローカルのAngularバージョンが9に更新されます。次に、マテリアルを同期するには、次のコマンドを実行します。 ng update @angular/material