Error: Module not found: Error: Can't resolve '@danielmoncada/angular-datetime-picker/lib/date-time/adapter/native-date-time-adapter.class'

[zhenokin]

package.json

{
  "name": "angular12",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.1.0",
    "@angular/cdk": "12.1.4",
    "@angular/common": "~12.1.0",
    "@angular/compiler": "~12.1.0",
    "@angular/core": "~12.1.0",
    "@angular/forms": "~12.1.0",
    "@angular/material": "12.1.4",
    "@angular/platform-browser": "~12.1.0",
    "@angular/platform-browser-dynamic": "~12.1.0",
    "@angular/router": "~12.1.0",
    "@danielmoncada/angular-datetime-picker": "^12.0.0",
    "@types/moment": "^2.13.0",
    "moment": "^2.29.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.4",
    "@angular/cli": "~12.1.4",
    "@angular/compiler-cli": "~12.1.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.2"
  }
}

app.module.ts

import { Injectable, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NativeDateTimeAdapter } from '@danielmoncada/angular-datetime-picker/lib/date-time/adapter/native-date-time-adapter.class';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DateTimeAdapter, OWL_DATE_TIME_LOCALE_PROVIDER } from '@danielmoncada/angular-datetime-picker';
import { Platform } from '@angular/cdk/platform';

@Injectable()
export class CustomTimeAdapter extends NativeDateTimeAdapter {}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [
    { provide: DateTimeAdapter, useClass: CustomTimeAdapter, deps: [OWL_DATE_TIME_LOCALE_PROVIDER, Platform] },],
  bootstrap: [AppComponent]
})
export class AppModule { }

Created new app via ng new projectName. After ng serve command I get this error: ./src/app/app.module.ts:4:0-132 - Error: Module not found: Error: Can't resolve '@danielmoncada/angular-datetime-picker/lib/date-time/adapter/native-date-time-adapter.class' in 'C:\...\Desktop\test\angular\src\app'

[jcompagner]

i think you can't do that. (import it like that) i think NativeDateTimeModule is exported but not the NativeDateTimeAdapter (in public api) so i don't think you can extend it

not sure why it is not exported here https://github.com/danielmoncada/date-time-picker/blob/master/projects/picker/src/public_api.ts

[zhenokin]

@jcompagner I used https://github.com/DanielYKPan/date-time-picker on angular 6 and my case worked fine. But I'm trying to migrate to the latest angular version and I am faced with this problem.

[zhenokin]

Can anyone know how this can be implemented in another way?

import { DateTimeAdapter, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
import { NativeDateTimeAdapter } from 'ng-pick-datetime/date-time/adapter/native-date-time-adapter.class';

@Injectable()
export class CustomTimeAdapter extends NativeDateTimeAdapter {
  format(date: Date, displayFormat: any): string {
    if (!this.isValid(date)) {
      throw Error('JSNativeDate: Cannot format invalid date.');
    }

    date = new Date(Date.UTC(
      date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(),
      date.getMinutes(), date.getSeconds(), date.getMilliseconds()));

    return ('0' + date.getDate()).slice(-2) + '.' + ('0' + (date.getMonth() + 1)).slice(-2) + '.' + date.getFullYear();
  }
}

@NgModule({
  declarations: [
      ...
  ],
  imports: [
     ...
  ],
  providers: [
     ...
    { provide: DateTimeAdapter, useClass: CustomTimeAdapter, deps: [OWL_DATE_TIME_LOCALE, Platform] },
  ],
})

[jcompagner]

i don't think you really can its not public api. I think the component should also export NativeDateTimeAdapter to be able to do this

[danielmoncada]

This is implemented in version 12.2.0