refactor(docs-infra): update docs examples `tslint.json` to match CLI and fix failures (#38143)

This commit updates the `tslint.json` configuration file, that is used
to lint the docs examples, to match the one generated for new Angular
CLI apps. There are some minimal differences (marked with `TODO`
comments) for things, such as component selector prefix, that would
require extensive and/or difficult to validate changes in guides.

This commit also includes the final adjustments to make the docs
examples code compatible with the new tslint rules. (The bulk of the
work has been done in previous commits.)

PR Close #38143

aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts

@@ -24,8 +24,7 @@ describe('AngularJS to Angular Quick Reference Tests', () => {
 
     // Go through the samples
     const movieRows = getMovieRows();
-    for (let i = 0; i < expectedSamples.length; i++) {
+    for (const sample of expectedSamples) {
-      const sample = expectedSamples[i];
       const tableCell = movieRows.get(sample.row)
         .all(by.tagName('td')).get(sample.column);
       // Check the cell or its nested element

aio/content/examples/built-in-directives/src/app/app.component.ts

@@ -76,11 +76,7 @@ export class AppComponent implements OnInit {
   }
 
   giveNullCustomerValue() {
-    !(this.nullCustomer = null) ? (this.nullCustomer = 'Kelly') : (this.nullCustomer = null);
+    this.nullCustomer = 'Kelly';
-  }
-
-  resetNullItem() {
-    this.nullCustomer = null;
   }
 
   resetItems() {

aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts

@@ -1,4 +1,4 @@
-/* tslint:disable: no-unused-variable component-selector one-line space-before-function-paren */
+// tslint:disable: component-selector space-before-function-paren
 // #docplaster
 // #docregion
 import { Component, forwardRef, Optional, SkipSelf } from '@angular/core';

aio/content/examples/dependency-injection/src/app/car/car.component.ts

@@ -27,9 +27,9 @@ import { useInjector } from './car-injector';
   providers: [Car, Engine, Tires]
 })
 export class CarComponent {
-  factoryCar  = (new CarFactory).createCar();
+  factoryCar  = (new CarFactory()).createCar();
   injectorCar = useInjector();
-  noDiCar     = new CarNoDi;
+  noDiCar     = new CarNoDi();
   simpleCar   = simpleCar();
   superCar    = superCar();
   testCar     = testCar();

aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts

@@ -90,7 +90,7 @@ function compileAndCreate() {
  * The (almost) same tests for both.
  * Only change: the way that the first hero is clicked
  */
-function tests(heroClick: Function) {
+function tests(heroClick: () => void) {
 
   it('should NOT have heroes before ngOnInit', () => {
     expect(comp.heroes.length).toBe(0,

aio/content/examples/testing/src/app/demo/async-helper.spec.ts

@@ -147,7 +147,7 @@ describe('Angular async helper', () => {
 
   // #docregion async-test-promise-then
   describe('test jsonp', () => {
-    function jsonp(url: string, callback: Function) {
+    function jsonp(url: string, callback: () => void) {
       // do a jsonp call which is not zone aware
     }
     // need to config __zone_symbol__supportWaitUnResolvedChainedPromise flag

aio/content/examples/testing/src/testing/jasmine-matchers.d.ts

@@ -1,3 +1,4 @@
+// tslint:disable-next-line: no-namespace
 declare namespace jasmine {
   interface Matchers<T> {
     toHaveText(actual: any, expectationFailOutput?: any): jasmine.CustomMatcher;

aio/content/examples/testing/src/testing/jasmine-matchers.ts

@@ -1,3 +1,4 @@
+// tslint:disable-next-line: no-reference
 /// <reference path="./jasmine-matchers.d.ts" />
 
 ////  Jasmine Custom Matchers ////

aio/content/examples/tslint.json

@@ -1,28 +1,61 @@
 {
-  "rulesDirectory": [
+  "extends": "tslint:recommended",
-    "../../node_modules/codelyzer"
-  ],
   "rules": {
-    "class-name": true,
+    "align": {
-    "comment-format": [
+      "options": [
-      true,
+        "parameters",
-      "check-space"
+        "statements"
-    ],
+      ]
+    },
+    "array-type": false,
+    "arrow-return-shorthand": true,
     "curly": true,
-    "eofline": true,
+    "deprecation": {
-    "forin": true,
+      "severity": "warning"
-    "indent": [
+    },
+    "component-class-suffix": true,
+    "component-selector": [
       true,
-      "spaces"
+      "element",
+      // TODO: Fix the code and change the prefix to `"app"` (or whatever makes sense).
+      "",
+      "kebab-case"
     ],
-    "label-position": true,
+    "contextual-lifecycle": true,
+    "directive-class-suffix": true,
+    "directive-selector": [
+      true,
+      "attribute",
+      ["app", "toh"],
+      "camelCase"
+    ],
+    "eofline": true,
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": {
+      "options": [
+        "spaces"
+      ]
+    },
+    "max-classes-per-file": false,
     "max-line-length": [
       true,
       140
     ],
-    "member-access": false,
+    "member-ordering": [
-    "no-arg": true,
+      true,
-    "no-bitwise": true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
     "no-console": [
       true,
       "debug",
@@ -31,63 +64,86 @@
       "timeEnd",
       "trace"
     ],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-variable": true,
     "no-empty": false,
-    "no-eval": true,
+    "no-inferrable-types": [
-    "no-inferrable-types": true,
-    "no-string-literal": false,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unused-expression": true,
-    "no-var-keyword": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
       true,
-      "check-open-brace",
+      "ignore-params"
-      "check-catch",
+    ],
-      "check-else",
+    "no-non-null-assertion": true,
-      "check-whitespace"
+    "no-redundant-jsdoc": true,
+    "no-switch-case-fall-through": true,
+    "no-var-requires": false,
+    "object-literal-key-quotes": [
+      true,
+      "as-needed"
     ],
     "quotemark": [
       true,
       "single"
     ],
-    "radix": true,
+    "semicolon": {
-    "semicolon": [
+      "options": [
-      "always"
+        "always"
-    ],
+      ]
-    "triple-equals": [
+    },
-      true,
+    "space-before-function-paren": {
-      "allow-null-check"
+      "options": {
-    ],
+        "anonymous": "never",
-    "typedef-whitespace": [
+        "asyncArrow": "always",
-      true,
+        "constructor": "never",
-      {
+        "method": "never",
-        "call-signature": "nospace",
+        "named": "never"
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
       }
-    ],
+    },
-    "variable-name": false,
+    "typedef-whitespace": {
-    "whitespace": [
+      "options": [
-      true,
+        {
-      "check-branch",
+          "call-signature": "nospace",
-      "check-decl",
+          "index-signature": "nospace",
-      "check-operator",
+          "parameter": "nospace",
-      "check-separator",
+          "property-declaration": "nospace",
-      "check-type"
+          "variable-declaration": "nospace"
-    ],
+        },
-
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ]
+    },
+    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
+    },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    },
+    "no-conflicting-lifecycle": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
     "no-inputs-metadata-property": true,
+    "no-output-native": true,
+    "no-output-on-prefix": true,
+    "no-output-rename": true,
     "no-outputs-metadata-property": true,
-    "use-life-cycle-interface": true,
+    "template-banana-in-box": true,
-    "use-pipe-transform-interface": true,
+    "template-no-negated-async": true,
-    "component-class-suffix": true,
+    "use-lifecycle-interface": true,
-    "directive-class-suffix": true,
+    "use-pipe-transform-interface": true
-    "import-destructuring-spacing": true
+  },
-  }
+  "rulesDirectory": [
+    "codelyzer"
+  ]
 }

aio/content/examples/universal/src/app/app.module.ts

@@ -51,7 +51,7 @@ import { isPlatformBrowser } from '@angular/common';
 export class AppModule {
   // #docregion platform-detection
   constructor(
-    @Inject(PLATFORM_ID) private platformId: Object,
+    @Inject(PLATFORM_ID) private platformId: object,
     @Inject(APP_ID) private appId: string) {
     const platform = isPlatformBrowser(platformId) ?
       'in the browser' : 'on the server';

aio/tools/examples/shared/boilerplate/cli/tslint.json

@@ -1,37 +1,50 @@
 {
   "extends": "tslint:recommended",
   "rules": {
+    "align": {
+      "options": [
+        "parameters",
+        "statements"
+      ]
+    },
     "array-type": false,
-    "arrow-parens": false,
+    "arrow-return-shorthand": true,
+    "curly": true,
     "deprecation": {
       "severity": "warning"
     },
     "component-class-suffix": true,
+    "component-selector": [
+      true,
+      "element",
+      // TODO: Fix the code and change the prefix to `"app"` (or whatever makes sense).
+      "",
+      "kebab-case"
+    ],
     "contextual-lifecycle": true,
     "directive-class-suffix": true,
     "directive-selector": [
       true,
       "attribute",
-      "app",
+      ["app", "toh"],
       "camelCase"
     ],
-    "component-selector": [
+    "eofline": true,
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
     "import-blacklist": [
       true,
       "rxjs/Rx"
     ],
-    "interface-name": false,
+    "import-spacing": true,
+    "indent": {
+      "options": [
+        "spaces"
+      ]
+    },
     "max-classes-per-file": false,
     "max-line-length": [
       true,
       140
     ],
-    "member-access": false,
     "member-ordering": [
       true,
       {
@@ -43,7 +56,6 @@
         ]
       }
     ],
-    "no-consecutive-blank-lines": false,
     "no-console": [
       true,
       "debug",
@@ -65,13 +77,59 @@
       true,
       "as-needed"
     ],
-    "object-literal-sort-keys": false,
-    "ordered-imports": false,
     "quotemark": [
       true,
       "single"
     ],
-    "trailing-comma": false,
+    "semicolon": {
+      "options": [
+        "always"
+      ]
+    },
+    "space-before-function-paren": {
+      "options": {
+        "anonymous": "never",
+        "asyncArrow": "always",
+        "constructor": "never",
+        "method": "never",
+        "named": "never"
+      }
+    },
+    "typedef-whitespace": {
+      "options": [
+        {
+          "call-signature": "nospace",
+          "index-signature": "nospace",
+          "parameter": "nospace",
+          "property-declaration": "nospace",
+          "variable-declaration": "nospace"
+        },
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ]
+    },
+    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
+    },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    },
     "no-conflicting-lifecycle": true,
     "no-host-metadata-property": true,
     "no-input-rename": true,

aio/tools/examples/shared/boilerplate/systemjs/tslint.json

@@ -1,31 +1,61 @@
 {
+  "extends": "tslint:recommended",
   "rules": {
-    "class-name": true,
+    "align": {
-    "comment-format": [
+      "options": [
-      true,
+        "parameters",
-      "check-space"
+        "statements"
-    ],
+      ]
+    },
+    "array-type": false,
+    "arrow-return-shorthand": true,
     "curly": true,
-    "eofline": true,
+    "deprecation": {
-    "forin": true,
+      "severity": "warning"
-    "indent": [
+    },
+    "component-class-suffix": true,
+    "component-selector": [
       true,
-      "spaces"
+      "element",
+      // TODO: Fix the code and change the prefix to `"app"` (or whatever makes sense).
+      "",
+      "kebab-case"
     ],
-    "label-position": true,
+    "contextual-lifecycle": true,
-    "label-undefined": true,
+    "directive-class-suffix": true,
+    "directive-selector": [
+      true,
+      "attribute",
+      ["app", "toh"],
+      "camelCase"
+    ],
+    "eofline": true,
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": {
+      "options": [
+        "spaces"
+      ]
+    },
+    "max-classes-per-file": false,
     "max-line-length": [
       true,
       140
     ],
-    "member-access": false,
     "member-ordering": [
       true,
-      "static-before-instance",
+      {
-      "variables-before-functions"
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
     ],
-    "no-arg": true,
-    "no-bitwise": true,
     "no-console": [
       true,
       "debug",
@@ -34,59 +64,86 @@
       "timeEnd",
       "trace"
     ],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
     "no-empty": false,
-    "no-eval": true,
+    "no-inferrable-types": [
-    "no-inferrable-types": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": false,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-unreachable": true,
-    "no-var-keyword": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
       true,
-      "check-open-brace",
+      "ignore-params"
-      "check-catch",
+    ],
-      "check-else",
+    "no-non-null-assertion": true,
-      "check-whitespace"
+    "no-redundant-jsdoc": true,
+    "no-switch-case-fall-through": true,
+    "no-var-requires": false,
+    "object-literal-key-quotes": [
+      true,
+      "as-needed"
     ],
     "quotemark": [
       true,
       "single"
     ],
-    "radix": true,
+    "semicolon": {
-    "semicolon": [
+      "options": [
-      "always"
+        "always"
-    ],
+      ]
-    "triple-equals": [
+    },
-      true,
+    "space-before-function-paren": {
-      "allow-null-check"
+      "options": {
-    ],
+        "anonymous": "never",
-    "typedef-whitespace": [
+        "asyncArrow": "always",
-      true,
+        "constructor": "never",
-      {
+        "method": "never",
-        "call-signature": "nospace",
+        "named": "never"
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
       }
-    ],
+    },
-    "variable-name": false,
+    "typedef-whitespace": {
-    "whitespace": [
+      "options": [
-      true,
+        {
-      "check-branch",
+          "call-signature": "nospace",
-      "check-decl",
+          "index-signature": "nospace",
-      "check-operator",
+          "parameter": "nospace",
-      "check-separator",
+          "property-declaration": "nospace",
-      "check-type"
+          "variable-declaration": "nospace"
-    ]
+        },
-  }
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ]
+    },
+    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
+    },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    },
+    "no-conflicting-lifecycle": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
+    "no-inputs-metadata-property": true,
+    "no-output-native": true,
+    "no-output-on-prefix": true,
+    "no-output-rename": true,
+    "no-outputs-metadata-property": true,
+    "template-banana-in-box": true,
+    "template-no-negated-async": true,
+    "use-lifecycle-interface": true,
+    "use-pipe-transform-interface": true
+  },
+  "rulesDirectory": [
+    "codelyzer"
+  ]
 }