feat: update to angular v12

BREAKING CHANGE

All packages now require the use of Angular CLI >= 12.0.0 < 13

.github/workflows/ci.yml

@@ -77,7 +77,8 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [12, 16]
+        # Angular CLI explicitly only supports Node version 12 or 14 at the time of writing
+        node: [12]
 
     steps:
     - uses: actions/checkout@v2

README.md

@@ -21,7 +21,39 @@
 
 <br>
 
-## Quick Start with Angular and ESLint
+## Quick Start with Angular v12 and later
+
+1. Follow the latest **Getting Started** guide on https://angular.io/ in order to install the Angular CLI
+
+2. Create a new Angular CLI workspace in the normal way, optionally using any of the supported command line arguments and following the interactive prompts:
+
+```sh
+ng new # --maybe --some --other --flags --here
+```
+
+3. **Change directory into your new workspace** and then use the Angular CLI to add `@angular-eslint/schematics`.
+
+```sh
+ng add @angular-eslint/schematics
+```
+
+...and that's it!
+
+As well as installing all relevant dependencies, the `ng add` command will automatically detect that you have a workspace with a single project in it, which does not have a linter configured yet. It can therefore go ahead and wire everything to up for you!
+
+You will also see that it added the following in your angular.json:
+
+```json
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  }
+```
+
+Read the section on [Using ESLint by default when generating new Projects within your Workspace](#using-eslint-by-default-when-generating-new-projects-within-your-workspace) to understand why this is useful.
+
+<br>
+
+## Quick Start with Angular before v12
 
 1. Follow the latest **Getting Started** guide on https://angular.io/ in order to install the Angular CLI
 
@@ -37,7 +69,7 @@ ng new # --maybe --some --other --flags --here
 ng add @angular-eslint/schematics
 ```
 
-4. Run the conversion schematic to automatically convert your new project from TSLint to ESLint:
+4. Before v12, the Angular CLI shipped with a TSLint setup, so you should run the conversion schematic to automatically convert your new project from TSLint to ESLint:
 
 ```sh
 ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --ignore-existing-tslint-config
@@ -62,21 +94,18 @@ Read the section on [Using ESLint by default when generating new Projects within
 
 ## Supported Angular CLI Versions
 
-For `@angular-eslint` versions greater than v2, we currently support Angular CLI `11.2.0` and onwards. This is also captured by our integration-tests package.
-
-For v1.x.x of these packages we supported Angular from `10.1.0` to `11.1.0`.
-
-> NOTE: In the future, we will switch the major version of these packages to match the Angular major version which we support
-
-### Why does Angular support in v1.x.x start at Angular `10.1.0`?
+As of v12, we aligned the major version of `@angular-eslint` with Angular (and Angular CLI).
 
-Angular `10.1.0` is significant because at version `10.0.0` the Angular Team switched to using project references and a `tsconfig.base.json` at the root of the project. This ultimately was deemed to be unsuccessful and in `10.1.0` they switched back to the original `tsconfig.json` without project references. Because angular-eslint and typescript-eslint care about your underlying TypeScript config, it is important that you are on the updated version which does _not_ use project references.
+Therefore, as an example (because these versions may or may not exist yet when you read this):
 
-The schematic will error if you try and run it when you still have a `tsconfig.base.json`.
+- `@angular-eslint` packages at `12.x.x` and `@angular/cli@12.x.x` are compatible
+- `@angular-eslint` packages at `13.x.x` and `@angular/cli@13.x.x` are compatible
+- `@angular-eslint` packages at `14.x.x` and `@angular/cli@14.x.x` are compatible
+- ...and so on...
 
-As usual, the Angular Team provided an automatic migration for these changes as part of `ng update`, so for most people this change wasn't an issue. If you updated manually (which is highly discouraged), then it is possible you did not apply this critical change and will therefore run into the error with the schematic.
+> NOTE: the exact minor and patch versions of each library represented here by `x`'s do not need to match each other, just the first (major) number
 
-We recommend going back an running the automated migrations from `ng update`, or fixing things up manually as a last resort.
+For an understanding of Angular CLI version support prior to v12, please see [./docs/ANGULAR_VERSION_SUPPORT.md](./docs/ANGULAR_VERSION_SUPPORT.md)
 
 **Please do not open issues related to unsupported versions of the Angular CLI**.
 
@@ -134,6 +163,20 @@ The latest version under the `canary` tag **(latest commit to master)** is:
 
 <br>
 
+## Adding ESLint configuration to an existing Angular CLI project which _has no existing linter_
+
+**NOTE: If you are looking for instructions on how to migrate a project which uses TSLint, please see the next section.**
+
+If you want to add ESLint configuration (a `.eslintrc.json` file and an applicable `"lint"` target in your `angular.json`) to an existing Angular CLI project which does not yet have a linter set up, you can invoke the following schematic:
+
+```sh
+ng g @angular-eslint/schematics:add-eslint-to-project {{YOUR_PROJECT_NAME_GOES_HERE}}
+```
+
+> If you only have a single project in your Angular CLI workspace, the project name argument is optional
+
+<br>
+
 ## Migrating an Angular CLI project from Codelyzer and TSLint
 
 We have some tooling to make this as automated as possible, but the reality is it will always be somewhat project-specific as to how much work will be involved in the migration.

docs/ANGULAR_VERSION_SUPPORT.md

@@ -0,0 +1,32 @@
+# Angular/Angular CLI version support with @angular-eslint
+
+## Current (v12 and later)
+
+As per the main README, as of v12, we aligned the major version of `@angular-eslint` with Angular (and Angular CLI).
+
+Therefore, as an example (because these versions may or may not exist yet when you read this):
+
+- `@angular-eslint` packages at `12.x.x` and `@angular/cli@12.x.x` are compatible
+- `@angular-eslint` packages at `13.x.x` and `@angular/cli@13.x.x` are compatible
+- `@angular-eslint` packages at `14.x.x` and `@angular/cli@14.x.x` are compatible
+- ...and so on...
+
+> NOTE: the exact minor and patch versions of each library represented here by `x`'s do not need to match each other, just the first (major) number
+
+## Prior to v12
+
+In order to support the above major version alignment to make things MUCH simpler from now on, in `@angular-eslint` we jumped from major version `4` to `12` (i.e. major versions 5-11 do not exist). This makes the version alignment prior to v12 a little harder to follow by comparison, but the following section outlines what you should be using together if you cannot move to Angular v12 yet for whatever reason.
+
+For `@angular-eslint` versions prior to v12 and greater than v2 (`>= 2 < 12`), we supported Angular CLI `11.2.0` up until, **but not including**, `12.0.0`. This is also captured by our integration-tests package.
+
+For v1.x.x of these packages we supported Angular from `10.1.0` to `11.1.0`.
+
+### Why does Angular support in v1.x.x start at Angular `10.1.0`?
+
+Angular `10.1.0` is significant because at version `10.0.0` the Angular Team switched to using project references and a `tsconfig.base.json` at the root of the project. This ultimately was deemed to be unsuccessful and in `10.1.0` they switched back to the original `tsconfig.json` without project references. Because angular-eslint and typescript-eslint care about your underlying TypeScript config, it is important that you are on the updated version which does _not_ use project references.
+
+The schematic will error if you try and run it when you still have a `tsconfig.base.json`.
+
+As usual, the Angular Team provided an automatic migration for these changes as part of `ng update`, so for most people this change wasn't an issue. If you updated manually (which is highly discouraged), then it is possible you did not apply this critical change and will therefore run into the error with the schematic.
+
+We recommend going back an running the automated migrations from `ng update`, or fixing things up manually as a last resort.

package.json

@@ -50,18 +50,18 @@
     ]
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1200.0-rc.2",
-    "@angular-devkit/build-angular": "12.0.0-rc.2",
-    "@angular/cli": "12.0.0-rc.2",
-    "@angular/compiler": "12.0.0-rc.2",
-    "@angular/compiler-cli": "12.0.0-rc.2",
+    "@angular-devkit/architect": "0.1200.0",
+    "@angular-devkit/build-angular": "12.0.0",
+    "@angular/cli": "12.0.0",
+    "@angular/compiler": "12.0.0",
+    "@angular/compiler-cli": "12.0.0",
     "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^8.1.0",
     "@nrwl/cli": "11.2.10",
     "@nrwl/nx-cloud": "11.1.3",
     "@nrwl/tao": "11.2.10",
     "@nrwl/workspace": "11.2.10",
-    "@schematics/angular": "~11.2.3",
+    "@schematics/angular": "12.0.0",
     "@types/eslint": "^7.2.0",
     "@types/eslint-scope": "^3.7.0",
     "@types/jest": "^26.0.15",

packages/builder/package.json

@@ -26,7 +26,7 @@
   ],
   "builders": "./builders.json",
   "peerDependencies": {
-    "@angular/cli": ">= 12.0.0-rc.2 < 13.0.0",
+    "@angular/cli": ">= 12.0.0 < 13.0.0",
     "eslint": "*",
     "typescript": "*"
   },

packages/eslint-plugin-template/package.json

@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "@angular-eslint/template-parser": "*",
-    "@angular/compiler": ">= 12.0.0-rc.2 < 13.0.0",
+    "@angular/compiler": ">= 12.0.0 < 13.0.0",
     "eslint": "*",
     "typescript": "*"
   },

packages/eslint-plugin/package.json

@@ -30,7 +30,7 @@
     "@angular-eslint/utils": "12.0.0-alpha.0"
   },
   "peerDependencies": {
-    "@angular/compiler": ">= 12.0.0-rc.2 < 13.0.0",
+    "@angular/compiler": ">= 12.0.0 < 13.0.0",
     "eslint": "*",
     "typescript": "*"
   },

packages/integration-tests/integration-tests-setup.ts

@@ -239,13 +239,15 @@ async function setupFixtures() {
     ]);
 
     process.chdir('../');
-    await runNgNew('v11-new-workspace');
-    process.chdir('./v11-new-workspace');
+    await runNgNew('v12-new-workspace');
+    process.chdir('./v12-new-workspace');
+
+    /**
+     * ng-add should detect that it is a single project workspace with no existing linter wired up
+     * and configure ESlint automatically.
+     */
     await runNgAdd();
-    await runConvertTSLintToESLint([
-      '--remove-tslint-if-no-more-tslint-targets',
-      '--ignore-existing-tslint-config',
-    ]); // no project specified, will convert only project in workspace
+
     await runNgGenerate(['app', 'another-app', '--interactive=false']);
     await runNgGenerate(['lib', 'another-lib', '--interactive=false']);
 

packages/integration-tests/package.json

@@ -12,7 +12,7 @@
     "clean": "rimraf tmp && rimraf fixtures/**/node_modules"
   },
   "dependencies": {
-    "@angular/cli": "~11.2.3"
+    "@angular/cli": "~12.0.0"
   },
   "peerDependencies": {
     "eslint": "*",

packages/integration-tests/tests/__snapshots__/v11-new-workspace.test.ts.snap → packages/integration-tests/tests/__snapshots__/v12-new-workspace.test.ts.snap

@@ -1,35 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`v11-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 2`] = `
+exports[`v12-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 2`] = `
 Object {
-  "@angular-devkit/build-angular": "~0.1102.3",
+  "@angular-devkit/build-angular": "~12.0.0",
   "@angular-eslint/builder": "9999.0.1-local-integration-tests",
   "@angular-eslint/eslint-plugin": "9999.0.1-local-integration-tests",
   "@angular-eslint/eslint-plugin-template": "9999.0.1-local-integration-tests",
   "@angular-eslint/schematics": "9999.0.1-local-integration-tests",
   "@angular-eslint/template-parser": "9999.0.1-local-integration-tests",
-  "@angular/cli": "~11.2.3",
-  "@angular/compiler-cli": "~11.2.4",
+  "@angular/cli": "~12.0.0",
+  "@angular/compiler-cli": "~12.0.0",
   "@types/jasmine": "~3.6.0",
   "@types/node": "^12.11.1",
   "@typescript-eslint/eslint-plugin": "4.16.1",
   "@typescript-eslint/parser": "4.16.1",
   "eslint": "^7.6.0",
-  "jasmine-core": "~3.6.0",
-  "jasmine-spec-reporter": "~5.0.0",
-  "karma": "~6.1.0",
+  "jasmine-core": "~3.7.0",
+  "karma": "~6.3.0",
   "karma-chrome-launcher": "~3.1.0",
   "karma-coverage": "~2.0.3",
   "karma-jasmine": "~4.0.0",
   "karma-jasmine-html-reporter": "^1.5.0",
-  "ng-packagr": "^11.0.0",
-  "protractor": "~7.0.0",
-  "ts-node": "~8.3.0",
-  "typescript": "~4.1.5",
+  "ng-packagr": "^12.0.0",
+  "typescript": "~4.2.3",
 }
 `;
 
-exports[`v11-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 3`] = `
+exports[`v12-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 3`] = `
 Object {
   "ignorePatterns": Array [
     "projects/**/*",
@@ -83,7 +80,7 @@ Object {
 }
 `;
 
-exports[`v11-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 4`] = `
+exports[`v12-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 4`] = `
 Object {
   "builder": "@angular-eslint/builder:lint",
   "options": Object {
@@ -95,7 +92,7 @@ Object {
 }
 `;
 
-exports[`v11-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 6`] = `
+exports[`v12-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 6`] = `
 Object {
   "extends": "../../.eslintrc.json",
   "ignorePatterns": Array [
@@ -143,7 +140,7 @@ Object {
 }
 `;
 
-exports[`v11-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 7`] = `
+exports[`v12-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 7`] = `
 Object {
   "builder": "@angular-eslint/builder:lint",
   "options": Object {
@@ -155,7 +152,7 @@ Object {
 }
 `;
 
-exports[`v11-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 9`] = `
+exports[`v12-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 9`] = `
 Object {
   "extends": "../../.eslintrc.json",
   "ignorePatterns": Array [
@@ -202,7 +199,7 @@ Object {
 }
 `;
 
-exports[`v11-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 10`] = `
+exports[`v12-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 10`] = `
 Object {
   "builder": "@angular-eslint/builder:lint",
   "options": Object {
@@ -214,9 +211,9 @@ Object {
 }
 `;
 
-exports[`v11-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 11`] = `
+exports[`v12-new-workspace it should pass linting after creating a new workspace from scratch using @angular-eslint 11`] = `
 "
-Linting \\"v11-new-workspace\\"...
+Linting \\"v12-new-workspace\\"...
 
 All files pass linting.
 
@@ -228,7 +225,7 @@ All files pass linting.
 
 Linting \\"another-lib\\"...
 
-__ROOT__/v11-new-workspace/projects/another-lib/src/lib/another-lib.component.ts
+__ROOT__/v12-new-workspace/projects/another-lib/src/lib/another-lib.component.ts
   17:3  error  Lifecycle methods should not be empty  @angular-eslint/no-empty-lifecycle-method
 
 ✖ 1 problem (1 error, 0 warnings)