Angular Material日期选择器在Nx项目中无法正常工作。

huangapple
go评论128阅读模式
英文:

Angular Material Datepicker does not work within Nx-Project

问题

以下是您要翻译的内容：

  • Stackblitz链接：Stackblitz

  • 我有一个使用Angular的nx项目，并且我在我的UI组件中使用Angular Material。我遇到了一个问题，无法在我的代码中实现mat-datepicker。
    看起来像这样（来自这里的默认示例）：

    1. <mat-form-field>
    2.     <mat-label>Choose a date</mat-label>
    3.     <input matInput [matDatepicker]="picker">
    4.     <mat-hint>MM/DD/YYYY</mat-hint>
    5.     <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
    6.     <mat-datepicker #picker></mat-datepicker>
    7. </mat-form-field>

  • 由于我正在使用NX，我有一个名为ui的库，在其中有一个ui.models.ts文件。它看起来像这样：

    1. import { NgModule } from "@angular/core";
    2. import { CommonModule } from "@angular/common";
    3. import { RouterModule } from "@angular/router";
    4. import { uiRoutes } from "./lib.routes";
    5. import { HomeComponent } from "./home/home.component";
    6. import { BrowserModule } from "@angular/platform-browser";
    7. import { UserProfileComponent } from "./profile/user-profile/user-profile.component";
    8. import { DirectorProfileComponent } from "./profile/director-profile/director-profile.component";
    9. import { NavigationComponent } from "./navigation/navigation.component";
    10. import { LoginComponent } from "./auth/login/login.component";
    11. import { RegestrationComponent } from "./auth/regestration/regestration.component";
    12. import { MaterialModule } from "./material.module";
    14. @NgModule({
    15.   imports: [CommonModule, RouterModule.forChild(uiRoutes), RouterModule, BrowserModule, MaterialModule],
    16.   declarations: [HomeComponent, NavigationComponent, LoginComponent, RegestrationComponent, UserProfileComponent, DirectorProfileComponent],
    17.   exports: [HomeComponent, NavigationComponent],
    18. })
    19. export class UiModule {}

  • MaterialModule是一个文件，我在其中导入了所有Angular Material模块。我创建了一个gist以便在这里有更多空间。MaterialModule 文件

  • 我在app.module.ts中导入了UiModule。

    1. import { NgModule } from "@angular/core";
    2. import { BrowserModule } from "@angular/platform-browser";
    3. import { RouterModule } from "@angular/router";
    4. import { AppComponent } from "./app.component";
    5. import { appRoutes } from "./app.routes";
    6. import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
    7. import { UiModule } from "@protrack-2023/ui";
    9. @NgModule({
    10.   declarations: [AppComponent],
    11.   imports: [BrowserModule, RouterModule.forRoot(appRoutes, { initialNavigation: "enabledBlocking" }), BrowserAnimationsModule, UiModule],
    12.   providers: [],
    13.   bootstrap: [AppComponent],
    14. })
    15. export class AppModule {}

为什么我认为这与NX相关

我创建了一个新的不使用NX的Angular项目，它按预期工作...

错误消息：

  1. 错误：libs/ui/src/lib/profile/user-profile/user-profile.component.html:74:29 - 错误 NG8002：无法绑定到“matDatepicker”，因为它不是“input”的已知属性。
  3. 74             <input matInput [matDatepicker]="picker">
  4.                                ~~~~~~~~~~~~~~~~~~~~~~~~
  6.   libs/ui/src/lib/profile/user-profile/user-profile.component.ts:6:16
  7.     6   templateUrl: "./user-profile.component.html",
  8.                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  9.     该错误发生在UserProfileComponent组件的模板中。
  12. 错误：libs/ui/src/lib/profile/user-profile/user-profile.component.html:76:50 - 错误 NG8002：无法绑定到“htmlFor”，因为它不是“mat-datepicker-toggle”的已知属性。
  13. 1. 如果“mat-datepicker-toggle”是Angular组件，并且它有“htmlFor”输入，请验证它是否属于此模块。
  14. 2. 如果“mat-datepicker-toggle”是Web组件，请将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
  15. 3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”。
  17. 76             <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  18.                                                     ~~~~~~~~~~~~~~
  20.   libs/ui/src/lib/profile/user-profile/user-profile.component.ts:6:16
  21.     6   templateUrl: "./user-profile.component.html",
  22.                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  23.     该错误发生在UserProfileComponent组件的模板中。

是否有人经历过与我类似的问题？

我创建了一个新项目，没有使用NX，它正常工作。

英文:

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

  1. &lt;mat-form-field&gt;
  2.     &lt;mat-label&gt;Choose a date&lt;/mat-label&gt;
  3.     &lt;input matInput [matDatepicker]=&quot;picker&quot;&gt;
  4.     &lt;mat-hint&gt;MM/DD/YYYY&lt;/mat-hint&gt;
  5.     &lt;mat-datepicker-toggle matIconSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
  6.     &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
  7. &lt;/mat-form-field&gt;

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:

  1. import { NgModule } from &quot;@angular/core&quot;;
  2. import { CommonModule } from &quot;@angular/common&quot;;
  3. import { RouterModule } from &quot;@angular/router&quot;;
  4. import { uiRoutes } from &quot;./lib.routes&quot;;
  5. import { HomeComponent } from &quot;./home/home.component&quot;;
  6. import { BrowserModule } from &quot;@angular/platform-browser&quot;;
  7. import { UserProfileComponent } from &quot;./profile/user-profile/user-profile.component&quot;;
  8. import { DirectorProfileComponent } from &quot;./profile/director-profile/director-profile.component&quot;;
  9. import { NavigationComponent } from &quot;./navigation/navigation.component&quot;;
  10. import { LoginComponent } from &quot;./auth/login/login.component&quot;;
  11. import { RegestrationComponent } from &quot;./auth/regestration/regestration.component&quot;;
  12. import { MaterialModule } from &quot;./material.module&quot;;
  14. @NgModule({
  15.   imports: [CommonModule, RouterModule.forChild(uiRoutes), RouterModule, BrowserModule, MaterialModule],
  16.   declarations: [HomeComponent, NavigationComponent, LoginComponent, RegestrationComponent, UserProfileComponent, DirectorProfileComponent],
  17.   exports: [HomeComponent, NavigationComponent],
  18. })
  19. 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.

  1. import { NgModule } from &quot;@angular/core&quot;;
  2. import { BrowserModule } from &quot;@angular/platform-browser&quot;;
  3. import { RouterModule } from &quot;@angular/router&quot;;
  4. import { AppComponent } from &quot;./app.component&quot;;
  5. import { appRoutes } from &quot;./app.routes&quot;;
  6. import { BrowserAnimationsModule } from &quot;@angular/platform-browser/animations&quot;;
  7. import { UiModule } from &quot;@protrack-2023/ui&quot;;
  9. @NgModule({
  10.   declarations: [AppComponent],
  11.   imports: [BrowserModule, RouterModule.forRoot(appRoutes, { initialNavigation: &quot;enabledBlocking&quot; }), BrowserAnimationsModule, UiModule],
  12.   providers: [],
  13.   bootstrap: [AppComponent],
  14. })
  15. export class AppModule {}

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

Error Message:

  1. Error: libs/ui/src/lib/profile/user-profile/user-profile.component.html:74:29 - error NG8002: Can&#39;t bind to &#39;matDatepicker&#39; since it isn&#39;t a known property of &#39;input&#39;.
  2. 74             &lt;input matInput [matDatepicker]=&quot;picker&quot;&gt;
  3. ~~~~~~~~~~~~~~~~~~~~~~~~
  4. libs/ui/src/lib/profile/user-profile/user-profile.component.ts:6:16
  5. 6   templateUrl: &quot;./user-profile.component.html&quot;,
  6. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  7. Error occurs in the template of component UserProfileComponent.
  8. Error: libs/ui/src/lib/profile/user-profile/user-profile.component.html:76:50 - error NG8002: Can&#39;t bind to &#39;htmlFor&#39; since it isn&#39;t a known property of &#39;mat-datepicker-toggle&#39;.
  9. 1. If &#39;mat-datepicker-toggle&#39; is an Angular component and it has &#39;htmlFor&#39; input, then verify that it is part of this module.
  10. 2. If &#39;mat-datepicker-toggle&#39; is a Web Component then add &#39;CUSTOM_ELEMENTS_SCHEMA&#39; to the &#39;@NgModule.schemas&#39; of this component to suppress this message.
  11. 3. To allow any property add &#39;NO_ERRORS_SCHEMA&#39; to the &#39;@NgModule.schemas&#39; of this component.
  12. 76             &lt;mat-datepicker-toggle matIconSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
  13. ~~~~~~~~~~~~~~
  14. libs/ui/src/lib/profile/user-profile/user-profile.component.ts:6:16
  15. 6   templateUrl: &quot;./user-profile.component.html&quot;,
  16. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  17. 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.

答案1

得分: 0

请在app.module.ts中按如下方式导入MatDatepickerModule和MatNativeDateModule：

  1. import { MatDatepickerModule } from '@angular/material/datepicker';
  2. import { MatNativeDateModule } from '@angular/material/core';

将它们添加到imports数组中。

英文:

Please import MatDatepickerModule and MatNativeDateModule in the app.module.ts as below:

  1. import { MatDatepickerModule } from &#39;@angular/material/datepicker&#39;;
  2. import { MatNativeDateModule } from &#39;@angular/material/core&#39;;

Add them in the imports array.

答案2

得分: 0

user-profile.component.ts 位于一个库中。也许它在该库的一个模块中声明。您还需要将 MatDatepickerModule 和 MatNativeDateModule 导入到该模块中。

英文:

I see that user-profile.component.ts lives in a library. Perhaps it is declared in a module in that library. You will need to import MatDatepickerModule and MatNativeDateModule to that module as well.

答案3

得分: 0

我升级到最新的nx工作区版本（16.3.2），它也将Angular和Angular Material更新到了v16。这解决了我的问题。

英文:

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.

huangapple
  • 本文由 发表于 2023年5月29日 00:14:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/76352420.html
  • angular
  • angular-material
  • nomachine-nx
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定