Home / Questions / 456927
Accepted
Javier García
Asked: 2022-06-03 09:30:40 +0800 CST 2022-06-03 09:30:40 +0800 CST

Angular project does not execute hooks when committing

  • 772

I have an Angular 9 project (ported from Angular 6) that I just migrated from tslint to eslint.

So far so good. If I run npm run lintit runs correctly (ng lint) and gives me all the errors.

The problem comes to me when I try to add a pre-execution now when committing so that the pre-commit with Husky is automatically executed and in this way review the project with the new eslint already configured.

Attached package.json:

    {
  "name": "angular-project-name",
  "version": "1.0.10-rc",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "http-serve": "http-server dist/esic-play/ -p 4200",
    "dev:ssr": "ng run esic-play:serve-ssr",
    "serve:ssr": "node dist/esic-play/server/main.js",
    "build:ssr": "ng build --configuration=pro && ng run esic-play:server:production",
    "prerender": "ng run esic-play:prerender"
  },
  "lint-staged": {
    "*": ["ng lint"]
  },
  "husky": {
    "hooks": {
      "pre-commit": "ng lint"
    }
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.1.13",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "^9.1.11",
    "@angular/compiler": "^9.1.11",
    "@angular/core": "^9.1.11",
    "@angular/fire": "6.1.1",
    "@angular/flex-layout": "9.0.0-beta.31",
    "@angular/forms": "^9.1.11",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "^9.1.11",
    "@angular/platform-browser-dynamic": "^9.1.11",
    "@angular/platform-server": "^9.1.11",
    "@angular/pwa": "^0.901.8",
    "@angular/router": "^9.1.11",
    "@angular/service-worker": "^9.1.11",
    "@fortawesome/angular-fontawesome": "^0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@material/shape": "^6.0.0",
    "@nguniversal/express-engine": "^9.1.1",
    "@ngx-share/core": "^7.1.4",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "angular-google-tag-manager": "^1.3.0",
    "angular-sanitize": "^1.8.0",
    "ckeditor4-angular": "^1.2.1",
    "cookieconsent": "^3.1.1",
    "core-js": "^3.6.5",
    "domino": "^2.1.6",
    "enhanced-resolve": "^4.2.0",
    "express": "^4.15.2",
    "firebase": "^8.1.1",
    "hammerjs": "^2.0.8",
    "html2canvas": "^1.0.0-rc.5",
    "http-server": "^0.12.3",
    "jspdf": "^1.5.3",
    "localstorage-polyfill": "^1.0.1",
    "moment": "^2.26.0",
    "ngx-cookie-service": "^3.0.4",
    "ngx-cookieconsent": "^2.2.3",
    "ngx-device-detector": "^1.4.5",
    "ngx-drag-scroll": "^8.0.0-beta.2",
    "ngx-swiper-wrapper": "^9.0.1",
    "ngx-toastr": "^13.2.0",
    "rxjs": "6.5.5",
    "socket.io-client": "^2.3.0",
    "spain-id": "^1.0.9",
    "tslib": "^1.13.0",
    "ustream-embedapi": "^1.0.0",
    "xlsx": "^0.16.2",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": ">= 0.900 < 0.1200",
    "@angular-devkit/build-angular": "^0.901.9",
    "@angular-eslint/builder": "1.2.0",
    "@angular-eslint/eslint-plugin": "1.2.0",
    "@angular-eslint/eslint-plugin-template": "1.2.0",
    "@angular-eslint/schematics": "1.2.0",
    "@angular-eslint/template-parser": "1.2.0",
    "@angular/cli": "^9.1.8",
    "@angular/compiler-cli": "^9.1.11",
    "@angular/language-service": "^9.1.11",
    "@nguniversal/builders": "^9.1.1",
    "@types/express": "^4.17.0",
    "@types/jasmine": "^3.5.10",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^14.0.13",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "codelyzer": "^5.2.2",
    "eslint": "^7.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "eslint-plugin-prettier": "^3.4.0",
    "firebase-admin": "^8.10.0",
    "firebase-functions": "^3.6.0",
    "firebase-functions-test": "^0.2.2",
    "firebase-tools": "^8.0.0",
    "fuzzy": "^0.1.3",
    "husky": "^6.0.0",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.2",
    "karma": "^5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "~3.1.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "lint-staged": "^11.0.0",
    "open": "^7.0.3",
    "prettier": "^2.3.0",
    "protractor": "~7.0.0",
    "ts-node": "^8.10.2",
    "typescript": "~3.8.3"
  }
}

I have tried to follow the documentation of Prettier (option 1) but I don't get anything...

angular

1 Answers

  1. Best Answer

    Finally I had failed to finish installing husky as indicated on their own website .

    I have executed npx husky installwhat has generated the hidden folder .husky I have inserted npx lint-stagedin the pre-commit file And I have had to delete the .git/hook folder from git because it generated error 127 as indicated in this issue to re-executenpm rebuild

    And in the end when inserting a file with eslint errors and doing git commit -m "test" the pre-commit has been executed.

    • 1