refactor(docs-infra): make angular.io and docs examples compatible wi…

…th RxJS v7 (#42660)

This commit applies the necessary changes to make angular.io and (most)
docs examples compatible with both RxJS v6 and v7. It also adds new
steps to relevant CI jobs to test angular.io and docs examples against
RxJS v7 as well (to catch potential regressions).

NOTE:
Some of the docs examples are not compatible with RxJS v7 and are
therefore excluded from the tests. The SystemJS-based ngUpgrade
examples in particular are excluded, since they require a different
SystemJS configs to run against RxJS v6 and v7 and the extra complexity
of managing that is not worth it for the 4 affected examples.

PR Close #42660

.circleci/config.yml

@@ -441,6 +441,9 @@ jobs:
       - run: yarn --cwd aio test-pwa-score-localhost $CI_AIO_MIN_PWA_SCORE
         # Check the bundle sizes.
       - run: yarn --cwd aio payload-size aio-local
+        # Run tests with RxJS v7.
+      - run: yarn --cwd aio add rxjs@7.1.0
+      - run: yarn --cwd aio test --progress=false --watch=false
 
   test_aio_tools:
     executor: default-executor
@@ -469,6 +472,10 @@ jobs:
         # Since the parallelism is set to "5", there will be five parallel CircleCI containers.
         # with either "0", "1", etc as node index. This can be passed to the "--shard" argument.
       - run: yarn --cwd aio example-e2e --setup --local --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
+        # Run tests with RxJS v7.
+        # (Exclude some examples that are not yet compatible with v7.)
+      - run: yarn --cwd aio/tools/examples/shared add rxjs@7.1.0 && yarn --cwd aio boilerplate:add
+      - run: yarn --cwd aio example-e2e --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL} --exclude=practical-observable-usage --exclude=upgrade-module --exclude=upgrade-phonecat
 
   # This job should only be run on PR builds, where `CI_PULL_REQUEST` is not `false`.
   aio_preview:

aio/content/examples/elements/src/app/popup.component.ts

@@ -50,5 +50,5 @@ export class PopupComponent {
   private _message = '';
 
   @Output()
-  closed = new EventEmitter();
+  closed = new EventEmitter<void>();
 }

aio/src/app/custom-elements/api/api.service.ts

@@ -30,7 +30,7 @@ export class ApiService implements OnDestroy {
   private apiBase = DOC_CONTENT_URL_PREFIX + 'api/';
   private apiListJsonDefault = 'api-list.json';
   private firstTime = true;
-  private onDestroy = new Subject();
+  private onDestroy = new Subject<void>();
   private sectionsSubject = new ReplaySubject<ApiSection[]>(1);
   private _sections = this.sectionsSubject.pipe(takeUntil(this.onDestroy));
 

aio/src/app/custom-elements/toc/toc.component.ts

@@ -19,7 +19,7 @@ export class TocComponent implements OnInit, AfterViewInit, OnDestroy {
   isCollapsed = true;
   isEmbedded = false;
   @ViewChildren('tocItem') private items: QueryList<ElementRef>;
-  private onDestroy = new Subject();
+  private onDestroy = new Subject<void>();
   primaryMax = 4;
   tocList: TocItem[];
 

aio/src/app/layout/notification/notification.component.ts

@@ -23,7 +23,7 @@ export class NotificationComponent implements OnInit {
   @Input() dismissOnContentClick: boolean;
   @Input() notificationId: string;
   @Input() expirationDate: string;
-  @Output() dismissed = new EventEmitter();
+  @Output() dismissed = new EventEmitter<void>();
 
   @HostBinding('@hideAnimation')
   showNotification: 'show'|'hide';

aio/src/app/shared/scroll-spy.service.ts

@@ -118,7 +118,7 @@ export class ScrollSpiedElementGroup {
 @Injectable()
 export class ScrollSpyService {
   private spiedElementGroups: ScrollSpiedElementGroup[] = [];
-  private onStopListening = new Subject();
+  private onStopListening = new Subject<void>();
   private resizeEvents = fromEvent(window, 'resize').pipe(auditTime(300), takeUntil(this.onStopListening));
   private scrollEvents = fromEvent(window, 'scroll').pipe(auditTime(10), takeUntil(this.onStopListening));
   private lastContentHeight: number;