The ngx-daterangepicker-material is throwing an error: "A declaration of an accessor is not allowed in an

I'm experiencing an error in my package.json file and could use some assistance. The specific error message I keep encountering is:

ERROR in node_modules/ngx-daterangepicker-material/daterangepicker.component.d.ts(59,9): error TS1086: An accessor cannot be declared in an ambient context.

    "@agm/core": "^1.0.0-beta.7",
    "@angular/animations": "~8.0.3",
    "@angular/cdk": "^8.1.1",
    "@angular/common": "~8.0.3",
    "@angular/compiler": "~8.0.3",
    "@angular/core": "~8.0.3",
    "@angular/forms": "~8.0.3",
    "@angular/material": "^8.1.1",
    "@angular/material-moment-adapter": "^8.1.1",
    "@angular/platform-browser": "~8.0.3",
    "@angular/platform-browser-dynamic": "~8.0.3",
    "@angular/router": "~8.0.3",
    "@fortawesome/angular-fontawesome": "^0.4.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@syncfusion/ej2-angular-calendars": "^17.4.51",
    "@types/jquery": "^3.3.35",
    "acorn": "^6.4.1",
    "angular-hammer": "^2.2.0",
    "angular-svg-icon": "^8.0.0",
    "bootstrap": "^4.3.1",
    "mat-range-datepicker": "^1.0.5",
    "moment": "^2.24.0",
    "ng2-datepicker": "^2.3.1",
    "ng2-tooltip-directive": "^2.9.20",
    "ngx-daterangepicker-material": "^2.2.1",
    "ngx-drag-scroll": "^8.0.0-beta.2",
    "ngx-infinite-scroll": "^8.0.2",
    "ngx-material-timepicker": "^5.5.1",
    "popper.js": "^1.15.0",
    "pretty-checkbox": "^3.0.3",
    "rxjs": "~6.4.0",
    "tslib": "^1.11.1",
    "xlsx": "^0.15.6",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.6",
    "@angular/cli": "~8.0.6",
    "@angular/compiler-cli": "~8.0.3",
    "@angular/language-service": "~8.0.3",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.3",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
Thank you for any assistance provided.
angulartypescriptnpmngx-daterangepicker-material

Answer №1

After spending 8 hours on metronic-angular 6.1.8, I was able to solve the issue.

  • Deleted package-lock.json
  • Removed node_modules folder
  • Ran npm install

If you encounter a TS1086 error when running ng serve, no need to panic...

Follow these steps:

Rerun `ng serve and enjoy! ;)

The initial solution resolved the development aspect, but deployment issues persisted. The ultimate fix includes:

  • Deleted package-lock.json
  • Removed node_modules folder
  • In package.json, remove (^) from ngx-daterangepicker-material library version ("ngx-daterangepicker-material": "^2.1.11" -> "ngx-daterangepicker-material": "2.1.11")
  • Upgrade moment version from ^2.24.0 to 2.25.3 (remove ^, "moment": "^2.24.0" -> "moment": "2.25.3",

Now everything is functioning properly... both ng serve and yarn build. ;)

Answer №2

I was able to resolve the issue by completing 2 specific steps

  1. To start, delete 

    "ngx-daterangepicker-material": "^2.2.1"
    from your package.json

  2. Next, execute 

    npm i <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="305e57481d5451445542515e57554059535b55421d5d5144554259515c70021e021e00">[email protected]</a>

  3. Finally, run "ng serve"

This should result in a successful compilation

Answer №3

I was able to fix the issue by following these steps:

  1. Start by deleting the node_modules folder from your project directory

  2. In your package.json file, update the version of ngx-daterangepicker-material from 2.2.1 to 2.1.9, like so:

replace -> "ngx-daterangepicker-material": "^2.2.1",

with -> "ngx-daterangepicker-material": "^2.1.9",

  1. Execute npm install in your terminal followed by the compilation process

This should result in a successful compilation

Answer №4

In order to tackle this problem, it is necessary to verify the angular version utilized in your project. Depending on the angular version, updating the ngx-daterangepicker-material library in the package.json may be required.

Refer to the information below to determine the appropriate library version for your angular project:

Versions:

Angular      ngx-daterangepicker-material
>=9.0.0      v2.3.x and v3.x
<9.0.0       v2.2.x and below

For more details, visit: https://www.npmjs.com/package/ngx-daterangepicker-material

If you encounter a javascript heap out of memory issue while running "ng --prod", execute the following command for production build:

node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build client --prod

Answer №5

Hey there! I'm facing a similar issue where changing the version doesn't seem to resolve it.

{
"title": "metronic-angular",
"version": "6.1.8",
"description": "Angular Packages",
"scripts": {
    "ng": "ng",
    "start": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json",
    "rtl": "webpack"
},
"private": true,
// Dependencies with their respective versions
}

}

Answer №6

After attempting all of the suggested fixes mentioned earlier, none of them resolved the problem I was facing. Fortunately, I managed to resolve the issue by making a simple adjustment to the package version:

"ngx-daterangepicker-material": "2.1.9"

Subsequently, - deleting the node_modules directory - running npm install - successfully executing ng serve - compiling with ng build --prod --aot=true also functioned properly

Answer №7

  1. Start by deleting the line "ngx-daterangepicker-material": "^2.2.1" from your package.json file

  2. Next, execute the command "npm i [email protected]"

Answer №8

To start, delete the line "ngx-daterangepicker-material": "^2.2.1" from package.json

Next, run "ngx-daterangepicker-material": "2.2.0"

If you see the ^ symbol, uninstall it before attempting npm install again. ^ signifies installing the latest version above

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using ng-template in child component from Parent Component in Angular

I am facing a situation where I have a BaseComponent and IncomingRequestsComponent that inherit from BaseComponent. To utilize templates in components that inherit from BaseComponent, I need to include them in the HTML of BaseComponent. export class BaseTi ...

angulartypescriptinheritance

Navigating Angular 2 v3 router - accessing the parent route parameters within a child route

My route is configured as /abc/:id/xyz The abc/:id portion directs to ComponentA, with /xyz being a nested component displayed within a router-outlet (ComponentB) Upon navigating to /abc/:id/xyz, I utilize this.route.params.subscribe(...) (where route is ...

angularangular2-routing

Creating a dynamic visual experience with Angular 2: How to implement multiple font colors

I have a text area which is connected to one string, with the default text color set to white. <textarea style="background-color: black;color:#fff;" [(ngModel)]="outputText"></textarea> The connected string contains multiple variables. retur ...

htmlcssangulartypescript

Transforming an array into a string

After successfully creating a function to work with tags, I encountered an issue where the data is stored in the database as an array instead of a string. How can I resolve this problem? private tags: string[] = []; private addTagToProduct($event): voi ...

javascriptangulartypescript

Exploring the customization options for Prime NG components is a great way to

Currently, I am working on a project that involves utilizing Prime NG components. Unfortunately, the p-steps component does not meet one of our requirements. I am looking to customize the Prime NG p-steps component to fit our needs. Is there a way to cre ...

angulartypescriptprimengjquery-steps

What is the best way to link labels with input fields located separately in Angular?

Imagine a scenario where labels and form fields are being created in a *ngFor loop, as shown below: app.component.ts export class AppComponent { items = ['aaa', 'bbbbbb', 'ccccccccc'] } app.component.html <div class ...

javascriptangularformstypescript

What is the best method for distinguishing between regular users and admin users in the layouts of an Angular application?

Recently, I've received details about a new project I'll be working on. It's an administrative application that will have multiple users with various roles and permissions to manage. Option 1: Develop a Lazy Loaded module for each user, inc ...

angularspring-bootjwt

Displaying a message indicating no results have been found in the typeahead dropdown using Angular Bootstrap

Is there a way to display a "No Results Found" message in the typeahead search results if no matching data is found? Any suggestions on how to achieve this? See the attached reference screenshot for an example of the message. https://i.sstatic.net/fDpJZ.p ...

javascriptjqueryangularbootstrap-4ng-bootstrap

Utilizing EventEmitters for cascading operations in Angular 2 dropdown menus

I have a form with several cascading drop-downs - the selection in one drop-down determines the options available in the next. Each drop-down retrieves its values from an async data service, and Angular EventEmitter is used to handle events and populate su ...

javascriptangulareventemitter

Encountering a Typescript issue with the updated Apollo server version within a NestJS application

After upgrading my nestJS application to use version 3.2 of apollo-server-plugin-base, I encountered two TypeScript errors related to a simple nestJS plugin: import { Plugin } from '@nestjs/graphql' import { ApolloServerPlugin, GraphQLRequest ...

typescriptnestjsapollo-server

The OnPrepareResponse method in StaticFileOptions does not trigger when serving the index.html file

Currently, I am attempting to disable caching for index.html in my Angular SPA that is connected to a .NET Core 2.2 backend. I am following the instructions provided in this particular answer by implementing an OnPrepareResponse action for my StaticFileOp ...

c#node.jsangulartypescriptasp.net-core

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

I'm currently in the process of setting up a list of ingredients with checkboxes and conditional buttons, but I'm facing some challenges with the default state. Ideally, I only want the button to be visible when the checkbox is unchecked so that ...

javascripthtmlangularionic-frameworkangular-ng-if

What is the best method for accessing environment variables within a Reactjs App hosted on an AWS EC2 instance?

My Reactjs app requires different credentials for each environment (Dev/staging/prod), and I want to fetch them from environment variables. In my webpack.config.js file, I have implemented the following logic: function getDotenvFilePath(){ if(process ...

javareactjsamazon-ec2npmwebpack

A guide on implementing conditional closing of HTML tags in Angular 2

Is it possible in Angular 2 to conditionally close an HTML tag like in PHP? For instance: <p> Some lorem <?php if(someConditionTrue){ echo "</p>"}; ?> ...

angularclient-side-templating

Using AngularJS with CDN: A beginner's guide

If I need to create an app using AngularJS with Cordova in Visual Studio, do I need anything else besides the Google CDN for AngularJS? <!doctype html> <html ng-app> <head> <title>My Angular App</title> <script s ...

angularjscordovatypescriptvisual-studio-cordova

Sending Component Properties to Objects in Vue using TypeScript

Trying to assign props value as an index in a Vue component object, here is my code snippet: export default defineComponent({ props:{ pollId:{type: String} }, data(){ return{ poll: polls[this.pollId] } } }) Encountering errors wh ...

typescriptvue.js

Storing a Vue/JS element reference in a constant using Typescript

In my template, I have one form element and one button element: <button type="submit" id="ms_sign_in_submit" ref="submitButton" class="btn btn-lg btn-primary w-100 mb-5"> </button> Wi ...

htmltypescriptvue.jsvuejs3vue-composition-api

``There seems to be an issue with Angular2 routing not functioning properly due to the presence of

Seeking assistance with an issue I'm facing. I am attempting to pass parameters in routing. However, when my parameter contains a slash symbol, Angular interprets the text after the slash as another parameter, causing my routing to fail. { path: &ap ...

angularroutesslash

Angular 5: Transforming and Concealing CSS Class Names

Can CSS selectors be renamed or obfuscated in an Angular CLI project? Many top websites like Google and Facebook use randomized CSS names for various reasons, such as preventing website scripting through targeting static class names. I would like to imple ...

cssangular

The caret prefix is not automatically included by NPM before the package version

Recently, I've noticed that when installing packages using npm with the command npm install <packagename> --save, there is no longer a prefix (^ or ~) before the package version in the package.json file. I used to have ^ as the default prefix, ...

npmpackage.jsonprefix