When attempting to write about the datepicker, I encountered the following error:
Uncaught Error: Template parse errors: 'mat-label' is not a recognized element:
- If 'mat-label' is an Angular component, please ensure that it is part of this module.
- If 'mat-label' is a Web Component, add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
app.module.ts
import { MatDatepickerModule } from '@angular/material/datepicker';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './pages/login/login.component';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { SignupComponent } from './pages/signup/signup.component';
import { ProfileComponent } from './pages/profile/profile.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { environment } from 'src/environments/environment';
import { AuthService } from './services/auth/auth.service';
import { AuthGuard } from './guards/auth.guard';
import { AlertModule } from '../app/_alert/alert.module';
import { HomeLayoutComponent } from './layouts/home-layout/home-layout.component';
import { LoginLayoutComponent } from './layouts/login-layout/login-layout.component';
import { StaffComponent } from './pages/staff/staff.component';
import { RegisterStaffComponent } from './pages/register-staff/register-staff.component';
import { AddTicketComponent } from './pages/add-ticket/add-ticket.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
export const router: Routes = [
{
path: '',
component: HomeLayoutComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
component: HomeComponent
},
{
path: 'staff',
component: StaffComponent
},
{
path: 'register-staff',
component: RegisterStaffComponent
},
{
path: 'add-ticket',
component: AddTicketComponent
},
{
path: 'profile',
component: ProfileComponent,
canActivate: [AuthGuard]
}
]
},
{
path: '',
component: LoginLayoutComponent,
children: [
{
path: 'login',
component: LoginComponent
},
{
path: 'signup',
component: SignupComponent
},
]
}
];
@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
NavbarComponent,
ProfileComponent,
SignupComponent,
StaffComponent,
RegisterStaffComponent,
HomeLayoutComponent,
LoginLayoutComponent,
AddTicketComponent
],
imports: [
FormsModule,
ReactiveFormsModule,
BrowserModule,
AppRoutingModule,
AlertModule,
RouterModule.forRoot(router),
AngularFireAuthModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
MatDatepickerModule,
BrowserAnimationsModule,
],
providers: [AuthService, AngularFireDatabase, AuthGuard],
bootstrap: [AppComponent],
})
export class AppModule { }