Stackblitz right here: Stackblitz

I have a nx project with angular and I use angular material for my ui components. I have this issue where I cannot implement a mat-datepicker in my code. Looks like this: (default example from here

<mat-form-field>
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-hint>MM/DD/YYYY</mat-hint>
    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

As I'm working with NX I have a library called ui in which I have a ui.models.ts file. It looks like this:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule } from "@angular/router";
import { uiRoutes } from "./lib.routes";
import { HomeComponent } from "./home/home.component";
import { BrowserModule } from "@angular/platform-browser";
import { UserProfileComponent } from "./profile/user-profile/user-profile.component";
import { DirectorProfileComponent } from "./profile/director-profile/director-profile.component";
import { NavigationComponent } from "./navigation/navigation.component";
import { LoginComponent } from "./auth/login/login.component";
import { RegestrationComponent } from "./auth/regestration/regestration.component";
import { MaterialModule } from "./material.module";

@NgModule({
  imports: [CommonModule, RouterModule.forChild(uiRoutes), RouterModule, BrowserModule, MaterialModule],
  declarations: [HomeComponent, NavigationComponent, LoginComponent, RegestrationComponent, UserProfileComponent, DirectorProfileComponent],
  exports: [HomeComponent, NavigationComponent],
})
export class UiModule {}

The MaterialModule is a file where I imported all angular material modules. I created a gist so there is more space here. MaterialModule File

I import the UiModule at app.module.ts.

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { appRoutes } from "./app.routes";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { UiModule } from "@protrack-2023/ui";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RouterModule.forRoot(appRoutes, { initialNavigation: "enabledBlocking" }), BrowserAnimationsModule, UiModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

why I think it is nx related

I created a new angular project without nx and it work as expected...

Error Message:

Error: libs/ui/src/lib/profile/user-profile/user-profile.component.html:74:29 - error NG8002: Can't bind to 'matDatepicker' since it isn't a known property of 'input'.

74             <input matInput [matDatepicker]="picker">
                               ~~~~~~~~~~~~~~~~~~~~~~~~

  libs/ui/src/lib/profile/user-profile/user-profile.component.ts:6:16
    6   templateUrl: "./user-profile.component.html",
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component UserProfileComponent.


Error: libs/ui/src/lib/profile/user-profile/user-profile.component.html:76:50 - error NG8002: Can't bind to 'htmlFor' since it isn't a known property of 'mat-datepicker-toggle'.
1. If 'mat-datepicker-toggle' is an Angular component and it has 'htmlFor' input, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

76             <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                                                    ~~~~~~~~~~~~~~

  libs/ui/src/lib/profile/user-profile/user-profile.component.ts:6:16
    6   templateUrl: "./user-profile.component.html",
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component UserProfileComponent.

Had someone the same experiance as me?

I created a new project without nx and it worked fine.

SOLUTION

I updated to the lastes nx workspace verion (16.3.2) which also updated angular and angular material to v16. It solved the problem for me.