fix(common): do not reference deprecated classes in providers (#14523) (

#14523)

References to `NgFor` are now an alias for `NgForOf` instead of a
derived class.

Fixes #14521

modules/@angular/common/src/common.ts

@@ -13,7 +13,7 @@
  */
 export * from './location/index';
 export {NgLocaleLocalization, NgLocalization} from './localization';
-export {CommonModule, DeprecatedCommonModule} from './common_module';
+export {CommonModule} from './common_module';
 export {NgClass, NgFor, NgForOf, NgIf, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index';
 export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, TitleCasePipe} from './pipes/index';
 export {PLATFORM_BROWSER_ID as ɵPLATFORM_BROWSER_ID, PLATFORM_SERVER_ID as ɵPLATFORM_SERVER_ID, PLATFORM_WORKER_APP_ID as ɵPLATFORM_WORKER_APP_ID, PLATFORM_WORKER_UI_ID as ɵPLATFORM_WORKER_UI_ID, isPlatformBrowser, isPlatformServer, isPlatformWorkerApp, isPlatformWorkerUi} from './platform_id';

modules/@angular/common/src/common_module.ts

@@ -29,12 +29,3 @@ import {COMMON_PIPES} from './pipes/index';
 })
 export class CommonModule {
 }
-
-/**
- * A module to contain deprecated directives.
- *
- * @deprecated
- */
-@NgModule({declarations: [COMMON_DEPRECATED_DIRECTIVES], exports: [COMMON_DEPRECATED_DIRECTIVES]})
-export class DeprecatedCommonModule {
-}

modules/@angular/common/src/directives/ng_for_of.ts

@@ -85,12 +85,8 @@ export class NgForOfRow<T> {
  *
  * @stable
  */
-@Directive({
-  selector: '[ngFor][ngForOf]',
-  providers: [{provide: forwardRef(() => NgFor), useExisting: forwardRef(() => NgForOf)}]
-})
-export class NgForOf<T> implements DoCheck,
-    OnChanges {
+@Directive({selector: '[ngFor][ngForOf]'})
+export class NgForOf<T> implements DoCheck, OnChanges {
   @Input() ngForOf: NgIterable<T>;
   @Input()
   set ngForTrackBy(fn: TrackByFunction<T>) {
@@ -191,66 +187,11 @@ class RecordViewTuple<T> {
 }
 
 /**
- * The `NgFor` directive instantiates a template once per item from an iterable. The context
- * for each instantiated template inherits from the outer context with the given loop variable
- * set to the current item from the iterable.
- *
- * ### Local Variables
- *
- * `NgFor` provides several exported values that can be aliased to local variables:
- *
- * * `index` will be set to the current loop iteration for each template context.
- * * `first` will be set to a boolean value indicating whether the item is the first one in the
- *   iteration.
- * * `last` will be set to a boolean value indicating whether the item is the last one in the
- *   iteration.
- * * `even` will be set to a boolean value indicating whether this item has an even index.
- * * `odd` will be set to a boolean value indicating whether this item has an odd index.
- *
- * ### Change Propagation
- *
- * When the contents of the iterator changes, `NgFor` makes the corresponding changes to the DOM:
- *
- * * When an item is added, a new instance of the template is added to the DOM.
- * * When an item is removed, its template instance is removed from the DOM.
- * * When items are reordered, their respective templates are reordered in the DOM.
- * * Otherwise, the DOM element for that item will remain the same.
- *
- * Angular uses object identity to track insertions and deletions within the iterator and reproduce
- * those changes in the DOM. This has important implications for animations and any stateful
- * controls (such as `<input>` elements which accept user input) that are present. Inserted rows can
- * be animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state
- * such as user input.
- *
- * It is possible for the identities of elements in the iterator to change while the data does not.
- * This can happen, for example, if the iterator produced from an RPC to the server, and that
- * RPC is re-run. Even if the data hasn't changed, the second response will produce objects with
- * different identities, and Angular will tear down the entire DOM and rebuild it (as if all old
- * elements were deleted and all new elements inserted). This is an expensive operation and should
- * be avoided if possible.
- *
- * To customize the default tracking algorithm, `NgFor` supports `trackBy` option.
- * `trackBy` takes a function which has two arguments: `index` and `item`.
- * If `trackBy` is given, Angular tracks changes by the return value of the function.
- *
- * ### Syntax
- *
- * - `<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>`
- * - `<li template="ngFor let item of items; let i = index; trackBy: trackByFn">...</li>`
- *
- * With `<template>` element:
- *
- * ```
- * <template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
- *   <li>...</li>
- * </template>
- * ```
- *
- * ### Example
- *
- * See a [live demo](http://plnkr.co/edit/KVuXxDp0qinGDyo307QW?p=preview) for a more detailed
- * example.
- *
- * @deprecated v4.0.0 - Use `NgForOf<T>` instead.
+ * @deprecated from v4.0.0 - Use NgForOf<any> instead.
+ */
+export type NgFor = NgForOf<any>;
+
+/**
+ * @deprecated from v4.0.0 - Use NgForOf instead.
  */
-export class NgFor extends NgForOf<any> {}
+export const NgFor = NgForOf;

modules/@angular/common/test/directives/ng_for_spec.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CommonModule} from '@angular/common';
-import {Component} from '@angular/core';
+import {CommonModule, NgFor, NgForOf} from '@angular/common';
+import {Component, Directive} from '@angular/core';
 import {ComponentFixture, TestBed, async} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {expect} from '@angular/platform-browser/testing/matchers';
@@ -29,7 +29,7 @@ export function main() {
 
     beforeEach(() => {
       TestBed.configureTestingModule({
-        declarations: [TestComponent],
+        declarations: [TestComponent, TestDirective],
         imports: [CommonModule],
       });
     });
@@ -350,6 +350,14 @@ export function main() {
            getComponent().items = ['e', 'f', 'h'];
            detectChangesAndExpectText('efh');
          }));
+
+      it('should support injecting `NgFor` and get an instance of `NgForOf`', async(() => {
+           const template = `<template ngFor [ngForOf]='items' let-item test></template>`;
+           fixture = createTestComponent(template);
+           const testDirective = fixture.debugElement.childNodes[0].injector.get(TestDirective);
+           const ngForOf = fixture.debugElement.childNodes[0].injector.get(NgForOf);
+           expect(testDirective.ngFor).toBe(ngForOf);
+         }));
     });
   });
 }
@@ -367,6 +375,11 @@ class TestComponent {
   trackByContext(): void { thisArg = this; }
 }
 
+@Directive({selector: '[test]'})
+class TestDirective {
+  constructor(public ngFor: NgFor) {}
+}
+
 const TEMPLATE = '<div><span *ngFor="let item of items">{{item.toString()}};</span></div>';
 
 function createTestComponent(template: string = TEMPLATE): ComponentFixture<TestComponent> {

tools/public_api_guard/common/typings/common.d.ts

@@ -32,10 +32,6 @@ export declare class DecimalPipe implements PipeTransform {
     transform(value: any, digits?: string): string;
 }
 
-/** @deprecated */
-export declare class DeprecatedCommonModule {
-}
-
 /** @stable */
 export declare class HashLocationStrategy extends LocationStrategy {
     constructor(_platformLocation: PlatformLocation, _baseHref?: string);
@@ -147,8 +143,7 @@ export declare class NgComponentOutlet implements OnChanges, OnDestroy {
 }
 
 /** @deprecated */
-export declare class NgFor extends NgForOf<any> {
-}
+export declare const NgFor: typeof NgForOf;
 
 /** @stable */
 export declare class NgForOf<T> implements DoCheck, OnChanges {