An Interest In:
Web News this Week
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
The ultimate migration guide to angular-eslint, ESLint and Nx 11
Cover photo by Anastasia Taioglou on Unsplash.
Updated to Nx version 11.0.2.
Nx version 11 has built-in support for Angular version 11 and ESLint using Nx and angular-eslint plugins which add Angular-specific lint rules and component template processing.
Let's explore different workspace configurations and discuss a few caveats. This guide includes options to use NPM or Yarn, Jest or Karma, as well as Cypress or Protractor. It includes guides both for setting up new Nx workspaces but also for migrating existing Nx workspaces that are either using ESLint or TSLint.
Note that as of Nx 11, generation schematics are known as generators, builders are known as executors, and architect targets are known as targets.
Table of contents
- Prerequisites
- Setting up a new Nx Angular workspace with angular-eslint
- Migrating an existing Nx 10 Angular workspace using ESLint
- Migrating an existing Nx 10 Angular workspace using TSLint
- Conclusion
Prerequisites
- It's recommended to use Node.js 12 for Nx 11.
- This guide assumes that Nx CLI version 11.x is installed globally.
- Install Angular CLI version 11.x globally just in case.
Setting up a new Nx Angular workspace with angular-eslint
In this use case, we create a new Nx workspace. We can either use the empty
workspace preset or the angular
workspace preset.
Option 1: Use the empty workspace preset
Using the empty
workspace preset, we use workspace.json
version 2 which is compatible with Nx plugins targeting Nx 11 or later.
Generate an Nx workspace.
First, let's create a minimal Nx workspace.Using NPM CLI:
npm init nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=empty --no-nx-cloud --package-manager=npm
Using Yarn CLI:
yarn create nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=empty --no-nx-cloud --package-manager=yarn
Set base branch for
affected
commands.
If you've been keeping up in 2020, the default branch of your Git repository ismain
. However, as of Nx version 11.0.2, the base branch for comparison is still set tomaster
, regardless of your default Git settings.Using
main
default branch:npx json -I -f nx.json -e "this.affected.defaultBase = 'main';"
Configure workspace package manager.
When Nx installs packages, it can use different package managers, but we have to tell it to do so.Using NPM CLI:
npx json -I -f workspace.json -e "this.cli.packageManager = 'npm';"
Using Yarn CLI:
npx json -I -f workspace.json -e "this.cli.packageManager = 'yarn';"
Delete TSLint.
Nx includes TSlint by default. Now that it's fully end-of-life, it's time to move on. Delete thetslint
package.Using NPM CLI:
npm uninstall tslint
Using Yarn CLI:
yarn remove tslint
Install the
@nrwl/angular
package as a development dependency.
To be able to generate Angular projects, configurations, and classes, we need to install the@nrwl/angular
package. For most packages, we should default to usingnx add <package-name>
, but for@nrwl/angular
in an Nx workspace using theempty
preset, this doesn't work. Instead, we'll install it manually.Using NPM CLI:
npm install --save-dev @nrwl/angular
Using Yarn CLI:
yarn add --dev @nrwl/angular
Create generators configuration.
Assign empty objects to the sub-properties of thegenerators
property inworkspace.json
matching generator names. This will hold default values for the generators which we will configure in the following steps.npx json -I -f workspace.json -e "this.generators = { '@nrwl/angular': { application: {}, library: {} } };"
Enable Angular strict mode.
We prefer strict configurations for TypeScript and Angular. We enable strict mode for Angular application and library projects.npx json -I -f workspace.json -e "this.generators['@nrwl/angular'].application.strict = true;"npx json -I -f workspace.json -e "this.generators['@nrwl/angular'].library.strict = true;"
Use ESLint as linter.
We configure ESLint as the default linter for all Angular application and library projects. This includes theangular-eslint
plugins.npx json -I -f workspace.json -e "this.generators['@nrwl/angular'].application.linter = 'eslint';"npx json -I -f workspace.json -e "this.generators['@nrwl/angular'].library.linter = 'eslint';"
Configure unit test runner.
Nx has built-in support for the Jest and Karma testing frameworks for Angular application and library projects.Use Jest:
npx json -I -f workspace.json -e "this.generators['@nrwl/angular'].application.unitTestRunner = 'jest';"npx json -I -f workspace.json -e "this.generators['@nrwl/angular'].library.unitTestRunner = 'jest';"
Use Karma:
npx json -I -f workspace.json -e "this.generators['@nrwl/angular'].application.unitTestRunner = 'karma';"npx json -I -f workspace.json -e "this.generators['@nrwl/angular'].library.unitTestRunner = 'karma';"
Configure end-to-end test runner.
Nx has built-in support for the Cypress and Protractor end-to-end testing frameworks for Angular application projects.Use Cypress:
npx json -I -f workspace.json -e "this.generators['@nrwl/angular'].application.e2eTestRunner = 'cypress';"
Use Protractor:
npx json -I -f workspace.json -e "this.generators['@nrwl/angular'].application.e2eTestRunner = 'protractor';"
Generate an Angular application project.
Because of our generators configuration, Angular application and library projects will be generated using ESLint andangular-eslint
.nx generate @nrwl/angular:application --name=booking-app --prefix=booking --tags="type:app,scope:booking" --no-interactive
We should also add project tags to the generated end-to-end testing project.
npx json -I -f nx.json -e "this.projects['booking-app-e2e'].tags = ['type:e2e','scope:booking'];"
Use strict Angular build budgets.
As of Nx version 11.0.2, the Angular build budgets do not adjust according to Angular strict mode. Let's use the same limits as Angular CLI 11 strict mode.The main bundle is set to warn at 500 KB and fail at 1 MB. Component styles are set to warn at 2 KB and fail at 4 KB.
npx json -I -f workspace.json -e "this.projects['booking-app'].targets.build.configurations.production.budgets = [{ type: 'initial', maximumWarning: '500kb', maximumError: '1mb' }, { type: 'anyComponentStyle', maximumWarning: '2kb', maximumError: '4kb' }];"
Delete Codelyzer.
Angular CLI version 11 includes Codelyzer by default when generating a workspace or an Angular application project. Now that TSlint is fully end-of-life, it's time to move on. Delete thecodelyzer
package.Using NPM CLI:
npm uninstall codelyzer
Using Yarn CLI:
yarn remove codelyzer
Generate an Angular workspace library.
To make sure that our configurations also work for Angular libraries, we create a workspace library.nx generate @nrwl/angular:library --name=feature-flight-search --directory=booking --prefix=booking --tags="type:feature,scope:booking" --buildable --no-interactive
Verify that linting works.
Run thelint
target on all projects to verify that ESLint withangular-eslint
works.nx run-many --target=lint --all
We have now created an Nx workspace with an Angular application project and an Angular library workspace project. By using the empty
workspace preset, we use version 2 of the Nx workspace configuration which uses the terms executors, generators, and targets.
In workspace.json
we can verify that the lint
targets use the @nrwl/linter:eslint
executor.
The base .eslintrc.json
configuration should mention the @nrwl/nx/typescript
ESLint plugin. Open the .eslintrc.json
files in the Angular application and library projects to verify that the @nrwl/nx/angular
, @nrwl/nx/angular-template
, and @angular-eslint/template/process-inline-templates
ESLint plugins are enabled.
Option 2: Use the angular workspace preset
As of Nx version 11.0.2, the angular
workspace preset generates the initial Angular application project without angular-eslint
and generates the initial application and end-to-end testing projects without taking these parameters into account:
create-application
e2e-test-runner
linter
no-interactive
tags
unit-test-runner
Nx will prompt us for a linter, but it will be ignored and fall back on the default linter which is ESLint. Unfortunately without angular-eslint
. See Nx issue #4272.
Because of this, we have to delete the initial projects, configure schematics and regenerate the Angular application and end-to-end testing projects.
Generate an Nx Angular workspace.
Using NPM CLI:
npm init nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --linter=eslint --no-nx-cloud --style=css --package-manager=npm
Using Yarn CLI:
yarn create nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --linter=eslint --no-nx-cloud --style=css --package-manager=yarn
Set base branch for
affected
commands.
If you've been keeping up in 2020, the default branch of your Git repository ismain
. However, as of Nx version 11.0.2, the base branch for comparison is still set tomaster
, regardless of your default Git settings.Using
main
default branch:npx json -I -f nx.json -e "this.affected.defaultBase = 'main';"
Configure workspace package manager.
When Nx installs packages, it can use different package managers, but we have to tell it to do so.Using NPM CLI:
npx json -I -f angular.json -e "this.cli.packageManager = 'npm';"
Using Yarn CLI:
npx json -I -f angular.json -e "this.cli.packageManager = 'yarn';"
Delete Codelyzer and TSlint.
Nx version 11 includes Codelyzer by default when using theangular
workspace preset. Now that TSlint is fully end-of-life, it's time to move on. Delete thecodelyzer
andtslint
packages.Using NPM CLI:
npm uninstall codelyzer tslint
Using Yarn CLI:
yarn remove codelyzer tslint
Enable Angular strict mode.
We prefer strict configurations for TypeScript and Angular. We enable strict mode for Angular application and library projects.npx json -I -f angular.json -e "this.schematics['@nrwl/angular:application'].strict = true;"npx json -I -f angular.json -e "this.schematics['@nrwl/angular:library'].strict = true;"
Configure unit test runner.
Nx has built-in support for the Jest and Karma testing frameworks for Angular application and library projects.Use Jest:
npx json -I -f angular.json -e "this.schematics['@nrwl/angular'].application.unitTestRunner = 'jest';"npx json -I -f angular.json -e "this.schematics['@nrwl/angular'].library.unitTestRunner = 'jest';"
Use Karma:
npx json -I -f angular.json -e "this.schematics['@nrwl/angular'].application.unitTestRunner = 'karma';"npx json -I -f angular.json -e "this.schematics['@nrwl/angular'].library.unitTestRunner = 'karma';"
Configure end-to-end test runner.
Nx has built-in support for the Cypress and Protractor end-to-end testing frameworks for Angular application projects.Use Cypress:
npx json -I -f angular.json -e "this.schematics['@nrwl/angular'].application.e2eTestRunner = 'cypress';"
Use Protractor:
npx json -I -f angular.json -e "this.schematics['@nrwl/angular'].application.e2eTestRunner = 'protractor';"
Delete application and end-to-end testing projects.
As mentioned in the introduction, theangular
workspace preset generates the initial projects without taking our preferences into acocunt, so we have to delete themnx generate remove booking-app-e2enx generate remove booking-app
Generate an Angular application project.
Because of our generators configuration, Angular application and library projects will be generated using ESLint andangular-eslint
.nx generate @nrwl/angular:application --name=booking-app --prefix=booking --tags="type:app,scope:booking" --no-interactive
We should also add project tags to the generated end-to-end testing project.
npx json -I -f nx.json -e "this.projects['booking-app-e2e'].tags = ['type:e2e','scope:booking'];"
Use strict Angular build budgets.
As of Nx version 11.0.2, the Angular build budgets do not adjust according to Angular strict mode. Let's use the same limits as Angular CLI 11 strict mode.The main bundle is set to warn at 500 KB and fail at 1 MB. Component styles are set to warn at 2 KB and fail at 4 KB.
npx json -I -f angular.json -e "this.projects['booking-app'].architect.build.configurations.production.budgets = [{ type: 'initial', maximumWarning: '500kb', maximumError: '1mb' }, { type: 'anyComponentStyle', maximumWarning: '2kb', maximumError: '4kb' }];"
Generate an Angular workspace library.
To make sure that our configurations also work for Angular libraries, we create a workspace library.nx generate @nrwl/angular:library --name=feature-flight-search --directory=booking --prefix=booking --tags="type:feature,scope:booking" --buildable --no-interactive
Delete Codelyzer.
Angular CLI version 11 includes Codelyzer by default when generating a workspace or an Angular application project, so we have to delete it again.
Using NPM CLI:npm uninstall codelyzer
Using Yarn CLI:
yarn remove codelyzer
Verify that linting works.
Run thelint
target on all projects to verify that ESLint withangular-eslint
works.nx run-many --target=lint --all
We have now created an Nx workspace with an Angular application project and an Angular library workspace project. By using the angular
workspace preset, we use version 1 of the Nx workspace configuration which is exactly the same as what Angular CLI uses. It still uses the terms builders, schematics, and architect targets.
In angular.json
we can verify that the lint
targets use the @nrwl/linter:eslint
executor.
The base .eslintrc.json
configuration should mention the @nrwl/nx/typescript
ESLint plugin. Open the .eslintrc.json
files in the Angular application and library projects to verify that the @nrwl/nx/angular
, @nrwl/nx/angular-template
, and @angular-eslint/template/process-inline-templates
ESLint plugins are enabled.
Migrating an existing Nx 10 Angular workspace using ESLint
If we have an existing Nx workspace, we are able to generate new Angular application and library projects using ESLint with angular-eslint
. However, a migration from TSLint to ESLint with angular-eslint
in an Nx workspace is not available yet.
Create Nx 10 workspace with
angular
preset.
For demonstration purposes, we generate a new Nx Angular workspace with a single application.Using NPM CLI:
npm init nx-workspace@10 nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --strict --no-nx-cloud --style=css --package-manager=npm --linter=eslint
Using Yarn CLI:
yarn global add create-nx-workspace@10create-nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --strict --no-nx-cloud --style=css --package-manager=yarn --linter=eslint
Generate an Angular workspace library.
To have a slightly more realistic example, we also generate an Angular workspace library project.nx generate @nrwl/angular:library --name=feature-flight-search --directory=booking --prefix=booking --tags="type:feature,scope:booking" --buildable --no-interactive
Migrate to Nx 11.
When updating to Nx 11, workspaces using ESLint will be migrated to also useangular-eslint
.Using NPM CLI:
nx migrate @nrwl/workspacenpm installnx migrate --run-migrations=migrations.jsonnpm installrm migrations.json
Using Yarn CLI:
nx migrate @nrwl/workspaceyarn installnx migrate --run-migrations=migrations.jsonyarn installrm migrations.json
Verify that linting works.
Run thelint
target on all projects to verify that ESLint withangular-eslint
works.nx run-many --target=lint --all
Migrating an existing Nx 10 Angular workspace using TSLint
As of Nx version 11.0.2, Nx hasn't got schematics for Nx Angular workspaces using TSLint to migrate to ESLint with angular-eslint.
Instead, we will use angular-eslint
's TSLint to ESLint migration schematics and perform some manual configurations to match that of a fully migrated Nx Angular workspace using ESLint with angular-eslint
.
For this example, we will use Nx' default test runners for the angular
workspace preset. Currently, this means Cypress and Jest. For Protractor and Karma, only the configuration for the end-to-end test project will differ. Consider generating a new Nx workspace with Karma, Protractor, and ESLint as described elsehwere in this article to compare ESLint configurations.
Note that the
angular
preset used in this guide usesangular.json
. The angular-eslint migrations do not work for Nx workspaces usingworkspace.json
.
Create Nx 10 workspace using the
angular
preset.
First we create a new Nx 10 workspace as an example. If you already have an existing workspace, adjust the following migration steps to your own workspace.Using NPM CLI:
npm init nx-workspace@10 nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --strict --no-nx-cloud --style=css --package-manager=npm --linter=tslint
Using Yarn CLI:
yarn global add create-nx-workspace@10create-nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=angular --app-name=booking-app --strict --no-nx-cloud --style=css --package-manager=yarn --linter=tslint
Generate an Angular workspace library.
This libary project is also for demonstration purposes. This step is not needed if you have an existing Nx workspace.nx generate @nrwl/angular:library --name=feature-flight-search --directory=booking --prefix=booking --tags="type:feature,scope:booking" --buildable --no-interactive
Migrate to Nx 11.
This is actually an optional step. All of the following steps work exactly the same for Nx 10.Using NPM CLI:
nx migrate @nrwl/workspacenpm installnx migrate --run-migrations=migrations.jsonnpm installrm migrations.json
Using Yarn CLI:
nx migrate @nrwl/workspaceyarn installnx migrate --run-migrations=migrations.jsonyarn installrm migrations.json
Migrate to
angular-eslint
.
First, we temporarily renametsconfig.base.json
totsconfig.json
because theangular-eslint
migrations aren't configured for solution-style TypeScript configurations which Nx uses since version 10.0.mv tsconfig.base.json tsconfig.json
Now we run
angular-eslint
schematics to install necessary development dependencies such aseslint-plugin-*
,@angular-eslint/*
, and@typescript-eslint/*
packages.nx add @angular-eslint/schematics
This might downgrade the version of
eslint
already installed by Nx. If this happens, make sure to keep the version installed by Nx. For example the followingUsing NPM CLI:
npm install --save-dev [email protected]
Using Yarn CLI:
yarn add [email protected]
Next, we run the
angular-eslint
TSLint to ESLint migration for each Angular application and library project in our workspace.In this step, you might see warnings like the following, depending on your TSLint rules:
WARNING: Within "tslint.json", the following 1 rule(s) did not have known converters in https://github.com/typescript-eslint/tslint-to-eslint-config - nx-enforce-module-boundariesYou will need to decide on how to handle the above manually, but everything else has been handled for you automatically.
In the case of the
nx-enforce-module-boundaries
rule which is the only rule giving us warnings when using the example workspace generated by these steps, don't worry about them as we will keep our root TSLint configuration file until the very last step. This is the lint rules used by thenx workspace-lint
command.For ESLint, this rule is called
@nrwl/nx/enforce-module-boundaries
and we will add it to our root ESLint configuration in one of the following steps.nx generate @angular-eslint/schematics:convert-tslint-to-eslint booking-appnx generate @angular-eslint/schematics:convert-tslint-to-eslint booking-app-e2enx generate @angular-eslint/schematics:convert-tslint-to-eslint booking-feature-flight-search
Finally, we revert the temporary renaming of
tsconfig.base.json
.mv tsconfig.json tsconfig.base.json
Configure angular-eslint to Nx workspace.
First, we remove unnecessary development dependencies.
yarn remove @angular-eslint/builder @angular-eslint/schematics
Then we add required development dependencies.
yarn add --dev @nrwl/eslint-plugin-nx eslint-config-prettier eslint-plugin-cypress
Next, we configure the root ESLint configuration.
# Ignore all files not matched in overridesnpx json -I -f .eslintrc.json -e "this.ignorePatterns = ['**/*'];"# Support ESLint plugins from `@nrwl/eslint-plugin-nx`npx json -I -f .eslintrc.json -e "this.plugins = ['@nrwl/nx'];"# Include tsx files# Can be left out from an Angular-only workspacenpx json -I -f .eslintrc.json -e "this.overrides[0].files = ['*.ts', '*.tsx'];"# Match all TypeScript project configuration filesnpx json -I -f .eslintrc.json -e "this.overrides[0].parserOptions.project = './tsconfig.*?.json';"# This setting is not used by the Nrwl Linternpx json -I -f .eslintrc.json -e "delete this.overrides[0].parserOptions.createDefaultProgram;"# Replace `angular-eslint` plugins with the Nx TypeScript ESLint plugin as it uses them internallynpx json -I -f .eslintrc.json -e "this.overrides[0].extends = ['plugin:@nrwl/nx/typescript'];"# Remove component template rule as this is defined in project-specific ESLint configurationsnpx json -I -f .eslintrc.json -e "this.overrides = this.overrides.slice(0, 1);"# Use Nx JavaScript ESLint plugin for js and jsx files# Can be left out from an Angular-only workspacenpx json -I -f .eslintrc.json -e "this.overrides = [...this.overrides, { files: ['*.js', '*.jsx'], extends: ['plugin:@nrwl/nx/javascript'], rules: {} }];"# Remove angular-eslint rules that are added to project-specific ESLint configurationsnpx json -I -f .eslintrc.json -e "delete this.overrides[0].rules['@angular-eslint/component-selector'];"npx json -I -f .eslintrc.json -e "delete this.overrides[0].rules['@angular-eslint/directive-selector'];"
The final change for the root ESLint configuration is to apply our workspace lint rules (and any other rules angular-eslint warned you about).
# This is where we configure the workspace lint rules# Refer to the root TSLint configurationnpx json -I -f .eslintrc.json -e "this.overrides = [{ files: ['*.ts', '*.tsx', '*.js', '*.jsx'], rules: { '@nrwl/nx/enforce-module-boundaries': ['error', { enforceBuildableLibDependency: true, allow: [], depConstraints: [{ sourceTag: '*', onlyDependOnLibsWithTags: ['*'] }] }] } }, ...this.overrides];"
Now it's time to configure the per-project ESLint configurations. Let's start with the
booking-app
project.# Add Nx Angular ESLint plugin and the ESLint inline component template processornpx json -I -f apps/booking-app/.eslintrc.json -e "this.overrides[0].extends = ['plugin:@nrwl/nx/angular', 'plugin:@angular-eslint/template/process-inline-templates'];"# Match all TypeScript project configuration filesnpx json -I -f apps/booking-app/.eslintrc.json -e "this.overrides[0].parserOptions.project = [this.overrides[0].parserOptions.project[0].replace('/tsconfig.app.json', '/tsconfig.*?.json')];"# This setting is not used by the Nrwl Linternpx json -I -f apps/booking-app/.eslintrc.json -e "delete this.overrides[0].parserOptions.createDefaultProgram;"# Use the ESLint component template processor and recommended component template rules from angular-eslintnpx json -I -f apps/booking-app/.eslintrc.json -e "this.overrides[1].extends = ['plugin:@nrwl/nx/angular-template', 'plugin:@angular-eslint/template/recommended'];"
Next, we configure ESLint and
angular-eslint
for thebooking-feature-flight-search
project. We make the same changes as we did for thebooking-app
project, except we start by correcting the path to the root ESLint configuration because the project-specific configuration is three folders deep in the workspace.# Correct path to root ESLint configurationnpx json -I -f libs/booking/feature-flight-search/.eslintrc.json -e "this.extends = '../' + this.extends;"# Add Nx Angular ESLint plugin and the ESLint inline component template processornpx json -I -f libs/booking/feature-flight-search/.eslintrc.json -e "this.overrides[0].extends = ['plugin:@nrwl/nx/angular', 'plugin:@angular-eslint/template/process-inline-templates'];"# Match all TypeScript project configuration filesnpx json -I -f libs/booking/feature-flight-search/.eslintrc.json -e "this.overrides[0].parserOptions.project = [this.overrides[0].parserOptions.project[0].replace('/tsconfig.lib.json', '/tsconfig.*?.json')];"# This setting is not used by the Nrwl Linternpx json -I -f libs/booking/feature-flight-search/.eslintrc.json -e "delete this.overrides[0].parserOptions.createDefaultProgram;"# Use the ESLint component template processor and recommended component template rules from angular-eslintnpx json -I -f libs/booking/feature-flight-search/.eslintrc.json -e "this.overrides[1].extends = ['plugin:@nrwl/nx/angular-template', 'plugin:@angular-eslint/template/recommended'];"
Finally, we configure ESLint for the
booking-app-e2e
project.# Use rules recommended by Cypressnpx json -I -f apps/booking-app-e2e/.eslintrc.json -e "this.extends = ['plugin:cypress/recommended', this.extends];"# Delete rule for component templatesnpx json -I -f apps/booking-app-e2e/.eslintrc.json -e "this.overrides = this.overrides.slice(0, 1);"# Add rules specifically for the Cypress plugin loadernpx json -I -f apps/booking-app-e2e/.eslintrc.json -e "this.overrides = [{ files: ['src/plugins/index.js'], rules: { '@typescript-eslint/no-var-requires': 'off', 'no-undef': 'off' } }, ...this.overrides];"# Match all TypeScript project configuration filesnpx json -I -f apps/booking-app-e2e/.eslintrc.json -e "this.overrides[1].parserOptions.project = [this.overrides[1].parserOptions.project[0].replace('/tsconfig.app.json', '/tsconfig.*?.json')];"# This setting is not used by the Nrwl Linternpx json -I -f apps/booking-app-e2e/.eslintrc.json -e "delete this.overrides[1].parserOptions.createDefaultProgram;"# Remove Angular declarable rulesnpx json -I -f apps/booking-app-e2e/.eslintrc.json -e "delete this.overrides[1].rules['@angular-eslint/component-selector'];"npx json -I -f apps/booking-app-e2e/.eslintrc.json -e "delete this.overrides[1].rules['@angular-eslint/directive-selector'];"
Open
apps/booking-app-e2e/src/support/commands.ts
and put the following comment before the line which saysdeclare namespace Cypress {
:// eslint-disable-next-line @typescript-eslint/no-namespace
In the same file, add this coment before the line which says
interface Chainabile<Subject> {
:// eslint-disable-next-line @typescript-eslint/no-unused-vars
Use Nrwl Linter builder.
The final step is to replace@angular-eslint/builder:lint
with@nrwl/linter:eslint
in our workspace configuration.# Use Nrwl Linternpx json -I -f angular.json -e "this.projects['booking-app'].architect.lint.builder = '@nrwl/linter:eslint';"npx json -I -f angular.json -e "this.projects['booking-feature-flight-search'].architect.lint.builder = '@nrwl/linter:eslint';"npx json -I -f angular.json -e "this.projects['booking-app-e2e'].architect.lint.builder = '@nrwl/linter:eslint';"# Only lint js and ts files in the end-to-end test projectnpx json -I -f angular.json -e "this.projects['booking-app-e2e'].architect.lint.options.lintFilePatterns = [this.projects['booking-app-e2e'].architect.lint.options.lintFilePatterns[0].replace('*.ts', '*.{js,ts}')];"
Remove Codelyzer and TSLint.
Using NPM CLI:
npm uninstall codelyzer tslintrm tslint.json
Using Yarn CLI:
yarn remove codelyzer tslintrm tslint.json
Verify that linting works.
Run thelint
target on all projects to verify that ESLint withangular-eslint
works.nx run-many --target=lint --all
Conclusion
The empty
preset for an Nx workspace is great, because it uses the new workspace.json
version 2 schema with executors, generators, and targets. We can configure it however we want and it supports angular-eslint
well.
A new Nx workspace can be created using the angular
preset to keep using the angular.json
workspace configuration. It supports angular-eslint
, but the initial projects are set up incorrectly as of Nx version 11.0.2.
An existing Nx 10 workspace using ESLint can migrate to angular-eslint
without any issues. As part of migrating to Nx 11, angular-eslint
will be installed and configured for existing projects using ESLint.
If we have an existing Nx 10 workspace using TSLint, we can migrate to Nx 11 without any issues, but there's not automatic migration from using TSLint to angular-eslint
yet as of Nx version 11.0.2.
However, there are migrations for Angular CLI workspaces. We can use these as a starting point to install angular-eslint
and create necessary ESLint configuration files and plugins.
To configure angular-eslint
manually for an Nx workspace, we carefully adjust our ESLint configurations in the same way as a new Nx workspace would. Additionally, we switch to the Nrwl Linter instead of the angular-eslint
builder.
No matter which combination of technologies we're using, it's possible to get rid of Codelyzer and TSLint today and start using angular-eslint
instead.
Some Angular-specific TSLint rules from Codelyzer do not have corresponding angular-eslint
rules implemented yet. At the time of writing, the missing rules are:
angular-whitespace
contextual-decorator
import-destructuring-spacing
no-unused-css
prefer-inline-decorator
template-accessibility-alt-text
template-accessibility-label-for
template-accessibility-table-scope
template-click-events-have-key-events
template-conditional-complexity
template-no-any
Why should we migrate away from TSLint as fast as possible? On December 1st 2020, TSLint went fully end-of-life. No PRs or issues are accepted ever again. This means that any release of Angular, TypeScript, Node.js, or any of TSLint's dependencies can potentially break TSLint version 6.1.3, the last version to ever be published. TSLint was deprecated 2 years ago.
Original Link: https://dev.to/this-is-angular/the-ultimate-migration-guide-to-angular-eslint-eslint-and-nx-11-1eh2
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To