ROENROLL-1859 fix when what-if dialog loads course list

src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.ts

 import { Component, OnInit } from '@angular/core';
 import { DarsApiService } from '../services/api.service';
 import { DegreePrograms, DegreeProgram } from '../models/degree-program';
-import { Observable, combineLatest } from 'rxjs';
+import { Observable, combineLatest, Subject } from 'rxjs';
 import {
   FormBuilder,
   FormGroup,
@@ -10,7 +10,13 @@ import {
   FormControl,
 } from '@angular/forms';
 import { HonorsOption } from '../models/honors-option';
-import { map, share, flatMap, shareReplay } from 'rxjs/operators';
+import {
+  map,
+  share,
+  flatMap,
+  shareReplay,
+  distinctUntilChanged,
+} from 'rxjs/operators';
 import { CourseBase } from '@app/core/models/course';
 import { Store } from '@ngrx/store';
 import { GlobalState } from '@app/core/state';
@@ -55,6 +61,7 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
   public institutions$: Observable<DegreePrograms>;
   public programOrPlanOptions$: Observable<DegreeProgram[]>;
   public degreePlans$: Observable<DegreePlan[]>;
+  public chosenRoadmapId$ = new Subject<number>();
   public honorsOptions$: Observable<HonorsOption[]>;
   public variableCreditCourses$: Observable<
     (CourseBase & { range: number[] })[]
@@ -103,13 +110,6 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
       }),
     );
 
-    this.degreePlans$ = this.store.select(degreePlans).pipe(shareReplay());
-
-    this.degreePlans$.subscribe(plans => {
-      const primaryPlan = plans.find(p => p.primary);
-      this.chosenAuditSettings.controls['degreePlan'].setValue(primaryPlan);
-    });
-
     this.honorsOptions$ = combineLatest([
       this.institutions$,
       (this.chosenProgram.get('institution') as FormControl).valueChanges,
@@ -121,9 +121,16 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
       }),
     );
 
-    // prettier-ignore
-    this.variableCreditCourses$ = (this.chosenAuditSettings.get('degreePlan') as FormControl).valueChanges.pipe(
-      flatMap(plan => this.api.getAllCourses(plan.roadmapId)),
+    const degreePlanFormControl = this.chosenAuditSettings.get('degreePlan');
+    if (degreePlanFormControl) {
+      degreePlanFormControl.valueChanges.subscribe(plan => {
+        this.chosenRoadmapId$.next(plan.roadmapId);
+      });
+    }
+
+    this.variableCreditCourses$ = this.chosenRoadmapId$.pipe(
+      distinctUntilChanged(),
+      flatMap(roadmapId => this.api.getAllCourses(roadmapId)),
       map(courses => {
         return courses.filter(course => {
           return (
@@ -142,7 +149,7 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
           ),
         })),
       ),
-      share(),
+      shareReplay(),
     );
 
     this.variableCreditCourses$.subscribe(courses => {
@@ -159,6 +166,17 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
         );
       });
     });
+
+    this.degreePlans$ = this.store.select(degreePlans).pipe(shareReplay());
+
+    this.degreePlans$.subscribe(plans => {
+      const primaryPlan = plans.find(p => p.primary);
+      this.chosenAuditSettings.controls['degreePlan'].setValue(primaryPlan);
+
+      if (primaryPlan) {
+        this.chosenRoadmapId$.next(primaryPlan.roadmapId);
+      }
+    });
   }
 
   public comparePlans(a: DegreePlan, b: DegreePlan): boolean {