Merge pull request #230 from cloudnc/upgrade-angular-13-ivy-only

.eslintrc.json

@@ -0,0 +1,51 @@
+{
+  "root": true,
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["tsconfig.json", "e2e/tsconfig.json"],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/ng-cli-compat",
+        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "prettier"
+      ],
+      "rules": {
+        // @todo: restore this one once the one below to turn it off temporarily is there
+        // "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "@typescript-eslint/no-unused-expressions": "off",
+        "id-blacklist": "off",
+        "id-match": "off",
+        "no-underscore-dangle": "off",
+        // @todo: restore following
+        // during the migration to ng 13, did remove tslint in favor of eslint
+        // but don't want to have to deal with loads of errors during the upgrade
+        "@typescript-eslint/naming-convention": "off",
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/member-ordering": "off",
+        "prefer-arrow/prefer-arrow-functions": "off",
+        "object-shorthand": "off",
+        "@typescript-eslint/no-empty-interface": "off",
+        "prefer-const": "off",
+        "arrow-body-style": "off",
+        "@typescript-eslint/consistent-type-definitions": "off"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {}
+    }
+  ]
+}

.github/workflows/main.yml

@@ -7,18 +7,17 @@ on: [push]
 
 jobs:
   build:
-
     # Machine environment:
     # https://help.github.com/en/articles/software-in-virtual-environments-for-github-actions#ubuntu-1804-lts
     # We specify the Node.js version manually below, and use versioned Chrome from Puppeteer.
     runs-on: ubuntu-18.04
 
     steps:
       - uses: actions/checkout@v1
-      - name: Use Node.js 12.8
+      - name: Use Node.js 14.17
         uses: actions/setup-node@v1
         with:
-          node-version: 12.8
+          node-version: 14.17
       - name: Install dependencies
         run: yarn --frozen-lockfile --non-interactive --no-progress
       - name: Lint Demo
@@ -30,7 +29,7 @@ jobs:
       - name: Test
         run: yarn lib:test:ci
       - name: Build Lib
-        run: yarn lib:build:prod:view-engine
+        run: yarn lib:build:prod
       - name: Cypress run
         uses: cypress-io/github-action@v2
         with:

.gitignore

@@ -26,6 +26,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

.prettierignore

@@ -2,3 +2,4 @@ package.json
 dist
 node_modules
 .history
+.angular

README.md

@@ -128,11 +128,11 @@ export class ListingComponent extends NgxAutomaticRootFormComponent<OneListing,
   // another solution would be to ask you to use a setter and call a hook but
   // this is too verbose, that's why we created a decorator `@DataInput`
   @DataInput()
-  // tslint:disable-next-line:no-input-rename
+  // eslint-disable-next-line @angular-eslint/no-input-rename
   @Input('listing')
   public dataInput: OneListing | null | undefined;
 
-  // tslint:disable-next-line:no-output-rename
+  // eslint-disable-next-line @angular-eslint/no-output-rename
   @Output('listingUpdated') public dataOutput: EventEmitter<OneListing> = new EventEmitter();
 
   // to access it from the view

angular.json

@@ -17,15 +17,20 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "aot": true,
             "outputPath": "dist/ngx-sub-form-demo",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -38,9 +43,7 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -56,7 +59,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -88,10 +92,9 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
@@ -103,7 +106,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/ngx-sub-form/tsconfig.lib.json",
             "project": "projects/ngx-sub-form/ng-package.json"
@@ -123,14 +126,16 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": ["projects/ngx-sub-form/tsconfig.lib.json", "projects/ngx-sub-form/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": ["projects/ngx-sub-form/**/*.ts", "projects/ngx-sub-form/**/*.html"]
           }
         }
       }
     }
   },
-  "defaultProject": "ngx-sub-form-demo"
+  "defaultProject": "ngx-sub-form-demo",
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  }
 }

package.json

@@ -13,16 +13,15 @@
     "---------------------- DEMO ----------------------": "",
     "demo:start": "yarn run ng serve",
     "demo:build:base": "yarn run ng build",
-    "demo:build:prod": "yarn run demo:build:base --prod",
+    "demo:build:prod": "yarn run demo:build:base --configuration production",
     "demo:test": "yarn run ng test",
     "demo:test:e2e:watch": "yarn run cy open",
     "demo:test:e2e:ci": "yarn run cy run",
     "demo:lint:check": "yarn run ng lint",
     "demo:lint:fix": "yarn run demo:lint:check --fix",
     "------------------ LIB ngx-sub-form ------------------": "",
-    "lib:build:prod:ivy": "yarn run ng build --project ngx-sub-form",
-    "lib:build:prod:view-engine": "yarn run lib:build:prod:ivy --prod",
-    "lib:build:watch": "yarn run lib:build:prod:view-engine --watch",
+    "lib:build:prod": "yarn run ng build --project ngx-sub-form --configuration production",
+    "lib:build:watch": "yarn run lib:build:prod --watch",
     "lib:test:watch": "yarn run ng test --project ngx-sub-form",
     "lib:test:ci": "yarn run ng test --project ngx-sub-form --watch false --browsers=ChromeHeadless",
     "------------------ Quick Commands ------------------": "",
@@ -33,60 +32,70 @@
     "readme:build": "embedme README.md && yarn run prettier README.md --write",
     "readme:check": "yarn readme:build && ! git status | grep README.md || (echo 'You must commit build and commit changes to README.md!' && exit 1)",
     "ngcc": "[ ! -f ./node_modules/.bin/ngcc ] || node --max_old_space_size=8000 ./node_modules/.bin/ngcc",
-    "postinstall": "yarn run ngcc"
+    "postinstall": "yarn run ngcc",
+    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "10.2.0",
-    "@angular/cdk": "10.2.0",
-    "@angular/common": "10.2.0",
-    "@angular/compiler": "10.2.0",
-    "@angular/core": "10.2.0",
-    "@angular/forms": "10.2.0",
-    "@angular/material": "9.0.0",
-    "@angular/platform-browser": "10.2.0",
-    "@angular/platform-browser-dynamic": "10.2.0",
-    "@angular/router": "10.2.0",
+    "@angular/animations": "13.0.2",
+    "@angular/cdk": "13.0.2",
+    "@angular/common": "13.0.2",
+    "@angular/compiler": "13.0.2",
+    "@angular/core": "13.0.2",
+    "@angular/forms": "13.0.2",
+    "@angular/material": "13.0.2",
+    "@angular/platform-browser": "13.0.2",
+    "@angular/platform-browser-dynamic": "13.0.2",
+    "@angular/router": "13.0.2",
     "@types/uuid": "3.4.7",
     "commitizen": "4.0.3",
     "core-js": "3.6.4",
     "fast-deep-equal": "3.1.1",
     "ngx-observable-lifecycle": "2.1.4",
     "rxjs": "6.5.4",
-    "tslib": "^2.0.0",
+    "tslib": "^2.3.1",
     "uuid": "3.4.0",
-    "zone.js": "0.10.3"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.1001.7",
-    "@angular-devkit/build-ng-packagr": "0.1001.7",
-    "@angular/cli": "10.1.7",
-    "@angular/compiler-cli": "10.2.0",
-    "@angular/language-service": "10.2.0",
+    "@angular-devkit/build-angular": "13.0.3",
+    "@angular-eslint/builder": "13.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin": "13.0.0-alpha.0",
+    "@angular-eslint/eslint-plugin-template": "13.0.0-alpha.0",
+    "@angular-eslint/schematics": "13.0.0-alpha.0",
+    "@angular-eslint/template-parser": "13.0.0-alpha.0",
+    "@angular/cli": "13.0.3",
+    "@angular/compiler-cli": "13.0.2",
+    "@angular/language-service": "13.0.2",
     "@bahmutov/add-typescript-to-cypress": "2.1.2",
-    "@types/jasmine": "3.5.5",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "2.0.8",
     "@types/node": "13.7.2",
-    "codelyzer": "5.2.1",
+    "@typescript-eslint/eslint-plugin": "5.3.0",
+    "@typescript-eslint/parser": "5.3.0",
     "cypress": "4.5.0",
     "cz-conventional-changelog": "3.1.0",
     "embedme": "1.20.0",
+    "eslint": "^8.1.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-import": "latest",
+    "eslint-plugin-jsdoc": "latest",
+    "eslint-plugin-prefer-arrow": "latest",
     "http-server-spa": "1.3.0",
-    "jasmine-core": "~3.5.0",
+    "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "~6.3.9",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^10.1.0",
+    "ng-packagr": "^13.0.5",
     "prettier": "1.19.1",
     "semantic-release": "17.1.1",
     "ts-node": "8.6.2",
     "tsconfig-paths-webpack-plugin": "3.2.0",
     "tsdef": "0.0.13",
-    "tslint": "~6.1.0",
-    "typescript": "4.0.3"
+    "typescript": "4.4.4"
   },
   "repository": {
     "type": "git",

projects/ngx-sub-form/.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["projects/ngx-sub-form/tsconfig.lib.json", "projects/ngx-sub-form/tsconfig.spec.json"],
+        "createDefaultProgram": true
+      },
+      "extends": ["prettier"],
+      "rules": {
+        "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "@typescript-eslint/no-unused-expressions": "off",
+        "id-blacklist": "off",
+        "id-match": "off",
+        "no-underscore-dangle": "off"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "rules": {}
+    }
+  ]
+}

projects/ngx-sub-form/ng-package.json

@@ -3,6 +3,5 @@
   "dest": "../../dist/ngx-sub-form",
   "lib": {
     "entryFile": "src/public_api.ts"
-  },
-  "whitelistedNonPeerDependencies": []
+  }
 }

projects/ngx-sub-form/src/lib/deprecated/ngx-automatic-root-form.component.spec.ts

@@ -61,11 +61,11 @@ class TestWrapperComponent {
 })
 class AutomaticRootFormComponent extends NgxAutomaticRootFormComponent<Vehicle> {
   @DataInput()
-  // tslint:disable-next-line:no-input-rename
+  // eslint-disable-next-line @angular-eslint/no-input-rename
   @Input('vehicle')
   public dataInput: Required<Vehicle> | null = null;
 
-  // tslint:disable-next-line:no-output-rename
+  // eslint-disable-next-line @angular-eslint/no-output-rename
   @Output('vehicleUpdated')
   public dataOutput: EventEmitter<Vehicle> = new EventEmitter();
 

projects/ngx-sub-form/src/lib/deprecated/ngx-automatic-root-form.component.ts

@@ -1,7 +1,7 @@
 import { OnInit, Directive } from '@angular/core';
 import { NgxRootFormComponent } from './ngx-root-form.component';
 
-// tslint:disable:directive-class-suffix
+/* eslint-disable @angular-eslint/directive-class-suffix */
 @Directive()
 /**
  * @deprecated