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 :)