The performance of linting has significantly decreased following the upgrade of nx/angular, particularly for the plugin import/no-deprecated

The upgrade process of the project involved moving from version 11.2.11 to version 12.2.10 through the nx upgrade process (nx migrate)

Following this upgrade, the code linting process now takes around 4 minutes, compared to the previous 30 seconds:

 time TIMING=1 ng lint my-app

> nx run my-app:lint 

Linting "my-app"...

All files pass linting.

Rule                                       |  Time (ms) | Relative
:------------------------------------------|-----------:|--------:
import/no-deprecated                       | 204887.182 |    99.6%
@nrwl/nx/enforce-module-boundaries         |    260.016 |     0.1%
@typescript-eslint/naming-convention       |     83.345 |     0.0%
max-len                                    |     66.311 |     0.0%
comma-dangle                               |     40.576 |     0.0%
no-global-assign                           |     23.094 |     0.0%
@typescript-eslint/no-unused-vars          |     22.934 |     0.0%
@typescript-eslint/type-annotation-spacing |     22.831 |     0.0%
no-misleading-character-class              |     18.360 |     0.0%
@typescript-eslint/triple-slash-reference  |     16.281 |     0.0%

———————————————————————————————————————————————

>  NX   SUCCESS  Running target "lint" succeeded



real    3m41.726s
user    4m19.102s
sys     0m23.049s

    "@angular-devkit/build-angular": "12.2.10",
    "@angular-eslint/eslint-plugin": "12.3.1",
    "@angular-eslint/eslint-plugin-template": "12.3.1",
    "@angular-eslint/template-parser": "12.3.1",
    "@angular/cli": "12.2.10",
    "@angular/compiler-cli": "12.2.10",
    "@angular/language-service": "12.2.10",
    "@angular/localize": "^12.2.10",
    ...
    "@nrwl/eslint-plugin-nx": "12.10.0",
    ...
    "eslint-plugin-import": "2.22.1",

For the eslint settings, 

"import/no-deprecated": "warn",

Should I make any changes to these settings or remove this import completely?

angulartypescripteslintnomachine-nx

Answer №1

Make sure to review your app's tsConfig file. In my situation, the "include" property was absent, causing a high linting time.


    {
       "include": ["./src/**/*.ts"],
       "files": ["./src/main.ts", "./src/polyfills.ts"],
       "exclude": ["./src/test.ts", "**/*.spec.ts"]
   }

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

Hide the MaterialTopTabNavigator from view

Is there a way to hide the react native MaterialTopTabNavigator on the screen while still maintaining the swiping functionality between screens? I want the user to be able to swipe between screens but not see the tab navigator itself. const Tab = creat ...

typescriptreact-native

Transforming ActivatedRoute.queryParams into a Promise

Instead of subscribing to route.queryParams as an Observable, I want it to be a Promise so that I can use async/await for function calls in ngOnInit. However, my attempt at this is not working as expected. The code below does not produce any output: constr ...

angularpromiseobservable

Creating a new row using ngFor is a straightforward process that allows for dynamic

I need some help figuring out how to create a new row using *ngFor in Angular. Here is the code snippet I am working with:<div class="row"> <div class="col-lg-3" *ngFor="let user of users">{{user.username}}</div> </div> If the nu ...

angularbootstrap-4

Angular 17 isn't notifying child component of signal changes

In the statistics module, I have a signal that specifies the type of charts to display and this signal is updated through a radio button group. The signal: typeSignal = signal<string>('OIA') The radio buttons for setting the : <div clas ...

angulartypescriptangular17

One system hosting two distinct projects, each running on its own unique node version

Managing two different projects with distinct dependencies has become a challenge for me. One project relies on AngularJS and node v4.2.0, while the other is built on Angular 6 requiring node v8.11.3. During development, I utilize nvm for windows to switc ...

node.jsangularnvm

Changes made to the updated component fields are not reflecting on the user interface

I've encountered an issue where I can't seem to update a variable in a component that is being displayed on the UI. Even though the content of the variable changes correctly, the UI fails to reflect this change. Strangely enough, when checking th ...

angular

What is the best way to accurately parse a Date object within a TypeScript class when the HttpClient mapping is not working correctly?

Task.ts: export class Task { name: string; dueDate: Date; } tasks.service.ts: @Injectable() export class TasksService { constructor(private http: HttpClient) { } getTasks(): Observable<Task[]> { return this.http.get<Ta ...

jsonangulartypescript

What is the best way to insert CSS code into a custom Vue directive file?

I need a solution that applies a gradient background to the parent div in case an image fails to load. I've attempted to create a directive for this purpose: export default { bind(el: any, binding: any) { try { ..... ...

typescriptvue.js

How to effectively merge DefaultTheme with styled-components in TypeScript?

I am facing an issue with integrating a module developed using styled-components that exports a theme. I want to merge this exported theme with the theme of my application. In my attempt in theme.ts, I have done the following: import { theme as idCheckThe ...

javascriptreactjstypescriptstyled-componentstsx

Using Swiper in an Angular 8 application

I've been working on integrating Swiper into my Angular 8 project: . I've added a javascript file to my assets folder and included it in my angular.json. In addition, I've imported Swiper in my app.module.ts file and executed npm install @ ...

angularnpmswiper.js

Ensuring the Current Page is Valid Before Progressing to the Next Step in Angular-Archwizard

Currently, I am working with Angular-7 and using angular-archwizard to create a multi-step form. The issue I am facing is that the form allows users to proceed to the next step without filling in all the required fields. My goal is to restrict users from m ...

angular

Angular applications encountering issues with Express delete-route functionality

For some reason, I am having trouble with Delete routes in my Angular applications. They seem to work perfectly when tested using Postman, but fail to function when called from within the Angular app. //Attempting to call a delete route from an Angular app ...

node.jsangulartypescriptexpresspostman

The functionality of the Bootstrap collapse menu is not compatible with Angular

I'm experiencing difficulties with implementing the "collapse" effect in the menu using bootstrap and angular. I have set up the layout separately and everything seems to be functioning correctly, but as soon as I integrate angular, the menu stops wor ...

angulartwitter-bootstrapbootstrap-4

Transform array sequences into their own unique sequences

Reorder Array of List to Fit My Custom Order Current Output: [ { "key": "DG Power Output", "value": "6.00", "unit": "kWh", }, { "key": "DG Run Time", "value": "5999999952", "unit": "minutes", }, { "key": "Fuel Level (Before)", "value": "8.00" ...

javascriptarraysangulartypescriptsorting

Troubleshooting Problem with Kendo UI Integration in Angular 2

Attempting to follow the steps outlined in http://www.telerik.com/kendo-angular-ui/getting-started/ Encountered this error message in the browser console. No errors found on the server side. <button kendoButton (click)="onButtonClick()" [ERROR ->][ ...

angularkendo-ui-angular2

Validating minimum and maximum values with Angular 2 FormBuilder

I am currently developing a form using Angular 2 Formbuilder and I want to ensure that users can only input positive values into the amount field (with a minValue of 0 and maxValue of 100). How can I go about implementing minimum and maximum value validati ...

javascriptangularangular2-formbuilder

Is there a way to change a .pptx document into a base64 string?

Currently, I am working on a project that involves creating an addin for Office. The challenge I am facing is opening other pptx files from within the addin. After some research, I discovered that I need to use base64 for the PowerPoint.createPresentation( ...

javascriptangulartypescriptbase64office-addins

Unable to correctly import a TypeScript class into a React project

I have encountered an issue where I am unable to assign a default value to a TypeScript Class in my React Project (Docusaurus). It works with: class Test { private hello: string; constructor() { this.hello = "hi"; } } However, it does ...

node.jsreactjstypescriptloader

Angular Universal involves making two HTTP calls

When using Angular Universal, I noticed that Http calls are being made twice on the initial load. I attempted to use transferState and implemented a caching mechanism in my project, but unfortunately, it did not resolve the issue. if (isPlatf ...

angulartypescriptexpressserver-side-renderingangular-universal

Encountering issues with retrieving application setting variables from Azure App Service in a ReactJS TypeScript application resulting in '

My dilemma lies in my app setup which involves a Node.js runtime stack serving a ReactJs Typescript application. I have set some API URLs in the application settings, and attempted to access them in ReactJs components using process.env.REACT_APP_URL, only ...

node.jsreactjstypescriptazureazure-web-app-service