n accessor cannot be declared in an ambient context.

[ranyehushua]

Hi, Thank you for sharing this project, looking forward to its development! I am running into an issue, not sure if this is something you have encountered as well. I am running Angular 8 and looks like this package is on the same version of Angular and Typescript as my project, so this is a strange one. I am getting the following error at build:

ERROR in ../../node_modules/@tabuckner/material-dayjs-adapter/lib/adapter/dayjs-date-adapter.d.ts:58:17 - error TS1086: An accessor cannot be declared in an ambient context.

I am having trouble debugging the error - some have suggested upgrading to typescript 3.6.0 but Angular 8 cli does not support this. Seems you have not moved to Angular 9 yet, so I doubt this is the issue. Have you encountered anything similar?

Thanks again!

[tabuckner]

@ranyehushua so here's the line it's referencing:

and the contents of that method:

  private get shouldUseUtc(): boolean {
    const { useUtc }: DayJsDateAdapterOptions = this.options || {};
    return !!useUtc;
  }

Just putting down some initial thoughts/digging.

Can you post a stackblitz example that illustrates the point, or link me the repo/branch you're seeing the issue w/ assuming it's public?

Thanks! 😄

[ranyehushua]

Thanks for the quick response! Unfortunately the repo is private (work), but I can provide the dependency versions we are using as well as my use of your module. This is an NX monorepo workspace.

App dependencies:

"dependencies": {
    "@agm/core": "1.0.0-beta.7",
    "@agm/snazzy-info-window": "1.0.0-beta.7",
    "@angular/animations": "^8.2.5",
    "@angular/cdk": "^8.1.4",
    "@angular/common": "^8.2.5",
    "@angular/compiler": "^8.2.5",
    "@angular/core": "^8.2.5",
    "@angular/forms": "^8.2.5",
    "@angular/material": "^8.1.4",
    "@angular/platform-browser": "^8.2.5",
    "@angular/platform-browser-dynamic": "^8.2.5",
    "@angular/platform-server": "^8.2.5",
    "@angular/router": "^8.2.5",
    "@nguniversal/common": "^8.0.0",
    "@nguniversal/express-engine": "^8.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^8.0.0",
    "@ngx-translate/core": "^11.0.1",
    "@nrwl/angular": "8.9.0",
    "@nrwl/web": "8.9.0",
    "@tabuckner/material-dayjs-adapter": "^1.0.0",
    "@types/jwt-decode": "^2.2.1",
    "angular2-text-mask": "^9.0.0",
    "bootstrap": "^4.2.1",
    "core-js": "^2.6.11",
    "dayjs": "^1.8.22",
    "file-saver": "^2.0.2",
    "hammerjs": "^2.0.8",
    "jwt-decode": "^2.2.0",
    "luhn": "^2.4.0",
    "ngx-cookie": "^4.1.2",
    "ngx-cookie-service": "^2.2.0",
    "ngx-mask": "^8.1.7",
    "ngx-toastr": "^10.0.4",
    "npm": "^6.13.3",
    "regenerator-runtime": "^0.13.3",
    "rxjs": "~6.4.0",
    "snazzy-info-window": "^1.1.1",
    "trackjs": "^3.7.2",
    "videogular2": "^6.4.0",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^8.4.1",
    "@angular-devkit/build-angular": "^0.803.14",
    "@angular/cli": "8.3.14",
    "@angular/compiler-cli": "^8.2.0",
    "@angular/language-service": "^8.2.0",
    "@babel/core": "7.5.4",
    "@ngneat/spectator": "^4.11.1",
    "@nrwl/cypress": "8.9.0",
    "@nrwl/storybook": "^8.11.0",
    "@nrwl/workspace": "8.9.0",
    "@storybook/addon-actions": "^5.2.8",
    "@storybook/addon-centered": "^5.2.8",
    "@storybook/addon-knobs": "^5.2.8",
    "@storybook/addon-storysource": "^5.2.8",
    "@storybook/core": "^5.2.8",
    "@storybook/angular": "^5.2.8",
    "@storybook/react": "^5.2.8",
    "@types/jasmine": "~2.8.6",
    "@types/jasmine_dom_matchers": "^1.4.4",
    "@types/node": "~8.9.4",
    "babel-loader": "^8.0.6",
    "codelyzer": "~5.0.1",
    "cypress": "3.4.1",
    "dotenv": "6.2.0",
    "is-docker": "^2.0.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-dom-matchers": "^0.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "prettier": "1.15.2",
    "rxjs-tslint-rules": "^4.25.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.5.3",
    "webpack-cli": "^3.3.10"
  }

Here is my module:

@NgModule( {
  imports: [
    CommonModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatDayjsDateModule,
    MatInputModule,
    NgxMaskModule.forRoot(),
    ReactiveFormsModule,
    ErrorMessagingModule
  ],
  declarations: [ DateInputComponent ],
  exports: [ DateInputComponent ],
  providers: [
    { provide: MAT_DAYJS_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } }
  ]
} )
export class DateInputModule {
  constructor( private dateAdapter: DateAdapter < Dayjs > ) {
    this.setLocale( 'en' );
  }

  setLocale( locale: string ) {
    dayjs.locale( locale );
    this.dateAdapter.setLocale( locale );
  }
}

I should add, the functionality DOES work, I am just getting the typescript build error... but with development server, the date is being formatted as expected.

Thanks again!

[ranyehushua]

I removed the access of shouldUseUtc from the constructor and this solved the build error. Interesting I do not get the error when running your example application, only in my own but the dependency versions appear to be the same. I will keep digging, thanks again!

[ranyehushua]

I was able to fix by moving the init dayjs calls, including the call to the shouldUseUtc accessor, out of the constructor and into private method. TS is no longer complaining and seems to function with no change. I can make a PR if you like?

[tabuckner]

Yeah that would be awesome!! Thank you so much! 💯🚀😄

[ranyehushua]

Done 😄

[ranyehushua]

Thanks for the super quick action @tabuckner! Just curious if you are going to publish the change to npm soon? If not, no big deal, I can just use a forked version until you do. Just wanted to check. Thanks again!

[tabuckner]

@ranyehushua sorry it took so long. Wanted to get a quick CD setup going.

V1.1.0 with your changes is now published :)

https://www.npmjs.com/package/@tabuckner/material-dayjs-adapter

[tabuckner]

Released in https://github.com/tabuckner/material-dayjs-adapter/releases/tag/v1.1.0

[ranyehushua]

🎉 🎉 🎉