refactor: add missing abstract directive decorators (#19256)

In version 10 of Angular, undecorated base classes using
Angular features (including the use of lifecycle hooks)
are no longer supported.

Author: devversion

src/cdk-experimental/column-resize/resizable.ts

@@ -8,6 +8,7 @@
 
 import {
   AfterViewInit,
+  Directive,
   ElementRef,
   Injector,
   NgZone,
@@ -38,6 +39,7 @@ const OVERLAY_ACTIVE_CLASS = 'cdk-resizable-overlay-thumb-active';
  * Base class for Resizable directives which are applied to column headers to make those columns
  * resizable.
  */
+@Directive()
 export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
     implements AfterViewInit, OnDestroy {
   protected minWidthPxInternal: number = 0;

src/cdk/table/row.ts

@@ -37,6 +37,7 @@ export const CDK_ROW_TEMPLATE = `<ng-container cdkCellOutlet></ng-container>`;
  * Base class for the CdkHeaderRowDef and CdkRowDef that handles checking their columns inputs
  * for changes and notifying the table.
  */
+@Directive()
 export abstract class BaseRowDef implements OnChanges {
   /** The columns to be displayed on this row. */
   columns: Iterable<string>;

src/material-experimental/mdc-list/list-base.ts

@@ -6,14 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterContentInit, ElementRef, NgZone, OnDestroy, QueryList} from '@angular/core';
+import {AfterContentInit, Directive, ElementRef, NgZone, OnDestroy, QueryList} from '@angular/core';
 import {setLines} from '@angular/material/core';
 import {Subscription} from 'rxjs';
 import {startWith} from 'rxjs/operators';
 
 export class MatListBase {}
 
-export class MatListItemBase implements AfterContentInit, OnDestroy {
+@Directive()
+export abstract class MatListItemBase implements AfterContentInit, OnDestroy {
   lines: QueryList<ElementRef<Element>>;
 
   private _subscriptions = new Subscription();

tools/tslint-rules/noUndecoratedClassWithNgFieldsRule.ts renamed to tools/tslint-rules/noUndecoratedClassWithAngularFeaturesRule.ts

@@ -1,13 +1,18 @@
 import * as Lint from 'tslint';
 import * as ts from 'typescript';
 
-const RULE_FAILURE = `Undecorated class defines fields with Angular decorators. Undecorated ` +
-  `classes with Angular fields cannot be extended in Ivy since no definition is generated. ` +
-  `Add a "@Directive" decorator to fix this.`;
+const RULE_FAILURE = `Undecorated class uses Angular features. Undecorated ` +
+    `classes using Angular features cannot be extended in Ivy since no definition is generated. ` +
+    `Add an Angular decorator to fix this.`;
+
+/** Set of lifecycle hooks that indicate that a given class declaration uses Angular features. */
+const LIFECYCLE_HOOKS = new Set([
+  'ngOnChanges', 'ngOnInit', 'ngOnDestroy', 'ngDoCheck', 'ngAfterViewInit', 'ngAfterViewChecked',
+  'ngAfterContentInit', 'ngAfterContentChecked'
+]);
 
 /**
- * Rule that doesn't allow undecorated class declarations with fields using Angular
- * decorators.
+ * Rule that doesn't allow undecorated class declarations using Angular features.
  */
 export class Rule extends Lint.Rules.TypedRule {
   applyWithProgram(sourceFile: ts.SourceFile, program: ts.Program): Lint.RuleFailure[] {
@@ -28,7 +33,12 @@ class Walker extends Lint.RuleWalker {
     }
 
     for (let member of node.members) {
-      if (member.decorators && this._hasAngularDecorator(member)) {
+      const hasLifecycleHook = member.name !== undefined &&
+          ts.isIdentifier(member.name) && LIFECYCLE_HOOKS.has(member.name.text);
+      // A class is considering using Angular features if it declares any of
+      // the known Angular lifecycle hooks, or if it has class members that are
+      // decorated with Angular decorators (e.g. `@Input`).
+      if (hasLifecycleHook || this._hasAngularDecorator(member)) {
         this.addFailureAtNode(node, RULE_FAILURE);
         return;
       }
@@ -38,8 +48,7 @@ class Walker extends Lint.RuleWalker {
   /** Checks if the specified node has an Angular decorator. */
   private _hasAngularDecorator(node: ts.Node): boolean {
     return !!node.decorators && node.decorators.some(d => {
-      if (!ts.isCallExpression(d.expression) ||
-          !ts.isIdentifier(d.expression.expression)) {
+      if (!ts.isCallExpression(d.expression) || !ts.isIdentifier(d.expression.expression)) {
         return false;
       }
 

tslint.json

@@ -112,7 +112,7 @@
     "no-import-export-spacing": true,
     "no-private-getters": true,
     "no-undecorated-base-class-di": true,
-    "no-undecorated-class-with-ng-fields": true,
+    "no-undecorated-class-with-angular-features": true,
     "setters-after-getters": true,
     "ng-on-changes-property-access": true,
     "require-breaking-change-version": true,