diff --git a/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts b/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts
index 619c01e3243..acae617ce3f 100644
--- a/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts
+++ b/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts
@@ -87,7 +87,7 @@ export class ChooseImportComponentComponent implements OnInit {
           this.dataService.getCurrentNodeId(),
           history.state.insertAfterComponentId
         )
-        .then((newComponents) => {
+        .subscribe((newComponents) => {
           this.projectService.saveProject();
           // refresh the project assets in case any of the imported components also imported assets
           this.projectAssetService.retrieveProjectAssets();
diff --git a/src/assets/wise5/services/importComponentService.ts b/src/assets/wise5/services/importComponentService.ts
index 3e549753c4e..810cdb4ce7d 100644
--- a/src/assets/wise5/services/importComponentService.ts
+++ b/src/assets/wise5/services/importComponentService.ts
@@ -4,6 +4,7 @@ import { ConfigService } from './configService';
 import { CopyNodesService } from './copyNodesService';
 import { InsertComponentService } from './insertComponentService';
 import { TeacherProjectService } from './teacherProjectService';
+import { map, Observable } from 'rxjs';
 
 @Injectable()
 export class ImportComponentService {
@@ -28,7 +29,7 @@ export class ImportComponentService {
     importProjectId: number,
     nodeId: string,
     insertAfterComponentId: string
-  ) {
+  ): Observable<any> {
     const newComponents = [];
     const newComponentIds = [];
     for (const component of components) {
@@ -46,11 +47,11 @@ export class ImportComponentService {
       newComponents,
       importProjectId,
       this.ConfigService.getConfigParam('projectId')
-    )
-      .toPromise()
-      .then((newComponents: any) => {
+    ).pipe(
+      map((newComponents: any) => {
         this.InsertComponentService.insertComponents(newComponents, nodeId, insertAfterComponentId);
         return newComponents;
-      });
+      })
+    );
   }
 }