Skip to main content
etiquetas editadas
Enlace
Origen Enlace
user39427
user39427

Problema etiquetas mat HTML en Angular 8.2.14

Cuando compilo mi módulo Angular, me salta este error de parseo 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. (

Estos son los ficheros que he modificado hasta ahora:

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

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { LogoutComponent } from './logout/logout.component';
import { MaterialModule } from './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';
import {MatCardModule, MatFormFieldModule, MatProgressSpinnerModule, MatTableModule, MatToolbarModule} from '@angular/material';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    LogoutComponent,
    HeaderComponent,
    UserComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatToolbarModule,
    MatCardModule,
    MatFormFieldModule,
    FormsModule,
    MatProgressSpinnerModule,
    MatTableModule
  ],
  providers: [ { provide: HTTP_INTERCEPTORS, useClass: BasicAuthHtppInterceptorService, multi: true }],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json

{
  "name": "conexiona-angular-client-web-dos",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@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",
    "bufferutil": "^4.0.1",
    "chokidar": "^3.4.2",
    "core-js": "^3.6.5",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "utf-8-validate": "^5.0.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.29",
    "@angular/cli": "^8.3.29",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

styles.css

/* You can add global styles to this file, and also import other style files */
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

login.component.html

<mat-card>
  <mat-card-header>
    <mat-card-title>Login</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <form>
      <table class="example-full-width" cellspacing="0">
        <tr>
          <td>
            <mat-form-field class="example-full-width">
              <input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
            </mat-form-field>
          </td>
        </tr>
        <tr>
          <td>
            <mat-form-field class="example-full-width">
              <input matInput placeholder="Password" [(ngModel)]="password" type="password" name="password" required>
            </mat-form-field>
          </td>
        </tr>
        <p *ngIf="error" class="error">
          {{ error }}
        </p>
      </table>
    </form>
    <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button (click)="checkLogin()" color="primary">Login</button>
  </mat-card-actions>
</mat-card>

Algunas preguntas relacionadas con ello: https://stackoverflow.com/questions/43479557/how-do-you-deal-with-div-with-mat-card-header-text-in-an-material2-card/47439591, https://stackoverflow.com/questions/56705672/how-can-i-align-a-material-icon-header-text-on-the-same-line?rq=1

Cómo tengo que hacer en esta versión para que se pueda visualizar el login, junto con el CSS? Muchas gracias por la ayuda :)