IliaIdakiev/angular-material-timepicker

Doesn't build with Angular 14

Closed this issue · 1 comments

How to reproduce on brand new project:

~/Temp
> ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 14.1.3
Node: 16.13.2
Package Manager: npm 8.18.0
OS: darwin arm64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1401.3 (cli-only)
@angular-devkit/core         14.1.3 (cli-only)
@angular-devkit/schematics   14.1.3 (cli-only)
@schematics/angular          14.1.3 (cli-only)


~/Temp
> ng new TimepickerTest --defaults
CREATE TimepickerTest/README.md (1068 bytes)
CREATE TimepickerTest/.editorconfig (274 bytes)
CREATE TimepickerTest/.gitignore (548 bytes)
CREATE TimepickerTest/angular.json (2963 bytes)
CREATE TimepickerTest/package.json (1046 bytes)
CREATE TimepickerTest/tsconfig.json (863 bytes)
CREATE TimepickerTest/.browserslistrc (600 bytes)
CREATE TimepickerTest/karma.conf.js (1432 bytes)
CREATE TimepickerTest/tsconfig.app.json (287 bytes)
CREATE TimepickerTest/tsconfig.spec.json (333 bytes)
CREATE TimepickerTest/.vscode/extensions.json (130 bytes)
CREATE TimepickerTest/.vscode/launch.json (474 bytes)
CREATE TimepickerTest/.vscode/tasks.json (938 bytes)
CREATE TimepickerTest/src/favicon.ico (948 bytes)
CREATE TimepickerTest/src/index.html (300 bytes)
CREATE TimepickerTest/src/main.ts (372 bytes)
CREATE TimepickerTest/src/polyfills.ts (2338 bytes)
CREATE TimepickerTest/src/styles.css (80 bytes)
CREATE TimepickerTest/src/test.ts (749 bytes)
CREATE TimepickerTest/src/assets/.gitkeep (0 bytes)
CREATE TimepickerTest/src/environments/environment.prod.ts (51 bytes)
CREATE TimepickerTest/src/environments/environment.ts (658 bytes)
CREATE TimepickerTest/src/app/app.module.ts (314 bytes)
CREATE TimepickerTest/src/app/app.component.css (0 bytes)
CREATE TimepickerTest/src/app/app.component.html (23083 bytes)
CREATE TimepickerTest/src/app/app.component.spec.ts (980 bytes)
CREATE TimepickerTest/src/app/app.component.ts (218 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

~/Temp                                                                                                          took 7s
> cd TimepickerTest

~/Temp/TimepickerTest on master
> npm i mat-timepicker
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: timepicker-test@0.0.0
npm ERR! Found: @angular/common@14.1.3
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^14.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^12.0.0 || ^13.0.0-0" from @angular/cdk@12.2.13
npm ERR! node_modules/@angular/cdk
npm ERR!   peer @angular/cdk@"^12.2.13" from mat-timepicker@5.1.6
npm ERR!   node_modules/mat-timepicker
npm ERR!     mat-timepicker@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/boris/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/boris/.npm/_logs/2022-08-23T10_56_38_880Z-debug-0.log

By forking the repo and changing versions to 14 in projects/mat-timepicker/package.json it managed to install, but fails to compile with many errors.

Sorry but I've just created a new project using:

Angular CLI: 14.1.3
Node: 14.15.5
Package Manager: yarn 1.22.19
OS: darwin x64

steps:

ng new test
cd test
ng add @angular/material
yarn add mat-datepicker@latest
ng s

inside the app.module I've added the MatTimepickerModule

and inside the app.component.html

<input matTimepicker>

It compiled without errors, warnings and it works like a charm.

I think your issue is caused by your environment because as you see you get ERESOLVE error from NPM which means that the package cannot be resolved and one thing to check out is this npm ERR! While resolving: timepicker-test@0.0.0. I have no idea what timepicker-test@0.0.0 is, so it must be something local to your env.

Good luck!