OsmosysSoftware / dev-standards

Documentation for all the development category standards followed at Osmosys
2 stars 10 forks source link

Facing error while running command "ng lint" #35

Closed PrinceYadav2 closed 1 year ago

PrinceYadav2 commented 1 year ago

I followed steps mentioned in the Osmosys Coding Standard Guidelines in order to install lint for the repository.

https://github.com/OsmosysSoftware/dev-standards/blob/main/coding-standards/angular.md

I was under "Testing and Commands" Section, Where We faced error while running the command "ng lint"

image

The error in mentioned location is :

[error] Error: Cannot find builder "@angular-devkit/build-angular:tslint". at WorkspaceNodeModulesArchitectHost.resolveBuilder (/home/prince/Desktop/Node-Projects/jet luxury/owner-portal/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:127:19) at LintCommandModule.getArchitectTargetOptions (/home/prince/Desktop/Node-Projects/jet luxury/owner-portal/node_modules/@angular/cli/src/command-builder/architect-base-command-module.js:125:47) at async LintCommandModule.builder (/home/prince/Desktop/Node-Projects/jet luxury/owner-portal/node_modules/@angular/cli/src/command-builder/architect-command-module.js:53:31) at async runCommand (/home/prince/Desktop/Node-Projects/jet luxury/owner-portal/node_modules/@angular/cli/src/command-builder/command-runner.js:73:5) at async default_1 (/home/prince/Desktop/Node-Projects/jet luxury/owner-portal/node_modules/@angular/cli/lib/cli/index.js:70:16)

Code in angular.json regarding lint.

"lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "tsconfig.app.json",
                            "tsconfig.spec.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }

Package.json:

{
  "name": "sakai-ng",
  "version": "16.0.0",
  "license": "PrimeNG Commercial",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "prettier-format": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|json)\""
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/cdk": "^16.1.0",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/forms": "^16.1.0",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "@fullcalendar/angular": "^6.0.3",
    "@fullcalendar/core": "^6.0.3",
    "@fullcalendar/daygrid": "^6.0.3",
    "@fullcalendar/interaction": "^6.0.3",
    "@fullcalendar/timegrid": "^6.0.3",
    "chart.js": "^3.3.2",
    "primeflex": "^3.3.1",
    "primeicons": "6.0.1",
    "primeng": "16.0.2",
    "prismjs": "^1.29.0",
    "quill": "^1.3.7",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.5",
    "@angular-eslint/eslint-plugin": "16.2.0",
    "@angular-eslint/eslint-plugin-template": "16.2.0",
    "@angular-eslint/schematics": "16.2.0",
    "@angular-eslint/template-parser": "16.2.0",
    "@angular/cli": "~16.1.5",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "@typescript-eslint/eslint-plugin": "5.62.0",
    "@typescript-eslint/parser": "5.62.0",
    "eslint": "^8.49.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^17.1.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-prettier": "^5.0.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "prettier": "^3.0.3",
    "typescript": "~5.1.3"
  }
}

Tried approaches: Checked this similar reference, It suggests to install lint schematics module which we have already installed. https://stackoverflow.com/questions/70141707/angular-tslint-cannot-find-builder-angular-devkit-build-angulartslint

Tried installing angular build devkit to resolve the issue as per chat gpt suggestion. npm install --save-dev @angular-devkit/build-angular

ashutosh-bisoyi commented 1 year ago

@PrinceYadav2 running ng add @angular-eslint/schematics should have install "@angular-eslint/builder" for you and ideally that should be used as your builder. Below I am attaching my dev dependencies and angular.json lint.

I am using the same angular version as you "@angular/core": "^16.1.0",

package.json

"devDependencies": {
    "@angular-devkit/build-angular": "^16.1.5",
    "@angular-eslint/builder": "16.1.0",
    "@angular-eslint/eslint-plugin": "16.1.0",
    "@angular-eslint/eslint-plugin-template": "16.1.0",
    "@angular-eslint/schematics": "16.1.0",
    "@angular-eslint/template-parser": "16.1.0",
    "@angular/cli": "~16.1.5",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "@typescript-eslint/eslint-plugin": "5.62.0",
    "@typescript-eslint/parser": "5.62.0",
    "eslint": "^8.44.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^17.1.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-prettier": "^5.0.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "prettier": "^3.0.1",
    "typescript": "~5.1.3"
  }

angular.json

"lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
          }
        }
PrinceYadav2 commented 1 year ago

Thanks for the suggestion @ashutosh-bisoyi , Basically issue was with angular.json only. We were using a theme for creating our project. Which had some configuration in angular.json regaring lint, which is mentioned in the issue earlier.

I removed the lint configuration from angular.json, Reran the rules and things worked fine.

Will close this issue.