버전 8.2.14의 각도 재질 문제

Question

수정 (2020 년 08 월 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 'is not a module , How to import Angular Material in project? , 다음과 같이 모듈을 구현하면 컴파일러에서 오류가 발생했습니다.

angular-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 태그를 표시하려면 어떻게해야합니까? 미리 감사드립니다 :)

Answer 1

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

그러면 로컬 각도 버전이 9로 업데이트됩니다. 그런 다음 자료를 동기화하려면 다음을 실행하십시오. ng update @angular/material