Repository: oppia/oppia

Issue:
Migrate AngularJS services to Angular 8
The Oppia project is currently in a hybrid state where we are currently using both Angular 8 and AngularJS. This makes our application slow and bulky, partly because several third-party libraries need to be duplicated (since many of the AngularJS libraries are not compatible with Angular).

The aim of this issue is to migrate services still using AngularJS to modern Angular 8. The benefits of doing this are:
* Improved Developer Experience: 
  * Developing when the application is a hybrid state opens us to a whole host of complicated errors which are, in some cases, not possible to solve.
  * AngularJS is deprecated, whereas Angular 8 is being actively maintained, and includes lots of new functionality that aids in developing new features.
* Improved User Experience:
  * When the codebase is completely migrated, the developers can focus their efforts on making new features for the website rather than fixing errors that pop up due to the hybrid state.
  * There will be a decrease in page loading times since we can drop one of the frameworks completely. This will also lead to better application performance in general.

The instructions on how to migrate a service can be found [here](https://github.com/oppia/oppia/wiki/Angular-Migration#implementation-details-to-migrate-services). You can use #9984 and #10693 as reference examples.

Listed below are the files which the Angular team believes can be migrated without major blockers, but please feel free to reach out on Gitter if you run into any problems. If you want to work on any unclaimed service in this tracker, please add a comment in this thread and tag @srijanreddy98, and we'll add you as an assignee. It will be all yours then. This is done so that we don't have any duplication of work.

Also, after migrating a service, make sure to manually test it. In case you don't know how to access that part of the codebase on the website, please contact your onboarding mentor or @srijanreddy98. Thanks!

Unclaimed:
 - [ ] story-creation.service.ts @ShivamJhaa 
 - [ ] entity-creation.service.ts @heyimShivam

Done:
- [x] story-update.service.ts  - @Radesh-kumar 
- [x] translation-tab-active-content-id.service.ts @Radesh-kumar (#11760)
- [x] state-tutorial-first-time.service.ts
- [x] editable-exploration-backend-api.service.ts - @srijanreddy98 
- [x] search.service.ts 
- [x] QuestionObjectFactory.ts
- [x] translation-language.service.ts
- [x] story-editor-state.service.ts 
- [x] skill-update.service.ts 
- [x] fatigue-detection.service.ts - @atpug22 
- [x] learner-answer-info.service.ts @aishwary023
- [x] admin-config-tab-backend-api.service.ts @ReshuKumari 
- [x] skill-backend-api.service.ts - @nishantwrp 
- [x] editable-topic-backend-api.service.ts - @jyan500
- [x] skill-mastery-backend-api.service.ts @Showtim3 
- [x] subtopic-viewer-backend-api.service.ts @bansalnitish 
- [x] search-explorations-backend-api.service.ts @vikasprashar99
- [x] editable-story-backend-api.service.ts
- [x] contribution-opportunities-backend-api.service.ts @srijanreddy98
- [x] SkillObjectFactory.ts @abhayraghuwanshi
- [x] collection-rights-backend-api.service.ts @h-ARTS
- [x] read-only-collection-backend-api.service.ts @bansalnitish 
- [x] editable-collection-backend-api.service.ts @bansalnitish 
- [x] expression-syntax-tree.service.ts @h-ARTS 
- [x] playthrough-issues-backend-api.service.ts @vinayakvvg
- [x] learner-answer-details-backend-api.service.ts  @vinayakvvg
- [x] question-backend-api.service.ts @bansalnitish 
- [x] question-creation.service.ts @bansalnitish 
- [x] PlaythroughService.ts @ankita240796 
- [x] exploration-recommendations.service.ts @ankita240796 
- [x] user-exploration-permissions.service.ts @ankita240796 
- [x] skill-rights-backend-api.service.ts @abhayraghuwanshi 
- [x] stats-reporting.service.ts @ankita240796 
- [x] topics-and-skills-dashboard-backend-api.service.ts @Rajat012k
- [x] concept-card-backend-api.service.ts @nadintamer
- [x] collection-creation-backend-api.service.ts 


Discussion:
I can provide contextual knowledge for voiceover-recording.service.ts if needed. 
can I work on SkillObjectFactory.ts

@abhayraghuwanshi Sure! Assigned the file to you.
Can i work on question-player-state.service.ts ?
@alphaQ1611 Yup, assigned the file to you!
Can I work on voiceover-recording.service.ts ?
Sure @chirag-wadhwa, please go ahead!
skillDict = {
  id: 1,
  description: 'test description',
  misconceptions: [misconceptionDict1, misconceptionDict2],
  rubrics: [rubricDict],
  skill_contents: skillContentsDict,
  language_code: 'en',
  version: 3,
  prerequisite_skill_ids: ['skill_1']
};
in many places id are defined as string type. I fixed it to number. Is it correct?
the prerequisite_skill_ids should be array of numbers or strings?
@tyleri 
skills id should be string or number?
@tyleri and prerequisite_skil_id array should be of string or number?

@abhayraghuwanshi As far as I know, the tests should use correct data types. It looks like they are both strings.
SkillEditorStateService.loadSkill('skill_id_1');
SkillUpdateService.setSkillDescription(
SkillEditorStateService.getSkill(), 'new description');
$rootScope.$apply();
  expect(SkillEditorStateService.saveSkill(
    'commit message')).toBe(true);
  $rootScope.$apply();

  var expectedId = 'skill_id_1';
  var expectedVersion = 3;
  var expectedCommitMessage = 'commit message';
why $rootScope.$apply() used here?
My tests in skill object all passed but the testsin the skill-editor-state.service is falling and i am trying to fixed them
@tyleri why rootscope.apply used there?
@abhayraghuwanshi Please clarify which file you are looking at. I do not see `$rootScope.$apply()` used in `SkillObjectFactory.ts` nor `SkillObjectFactorySpec.ts`.
rootScope.apply used in skillEditorState.service.ts. I understand now why it was used there

![Screenshot from 2020-02-04 07-24-42](https://user-images.githubusercontent.com/45534131/73748149-da98d580-4726-11ea-9049-b66d727189c4.png)
I am getting this error during my SkillObjectFactory pushing @tyleri 
@abhayraghuwanshi Are you still having issues with this?
when I simply use "import predConst from 'asset/constant'  " error: Module not found
when i use " import predConst fro './../../../../asset/constant' " the precommit linter is not compiling the ts file

Let's focus on one issue at a time. The pre_commit_linter is claiming that it cannot open the file SkillObjectFactory.js in that directory. Is it present in that directory? If so, can you verify what read permissions are on the file?
yes it is present int that one. I tried to comment out the the const import and used the skill difficulty like the ['easy', 'medium', 'hard']  the test ran in this case @tyleri 

@tyleri  can you assign the changelog in the pr
@abhayraghuwanshi Please link to the PR you are talking about.
#8587
Sorry i always forgot to link my PR
Thanks
@tyleri  could u assign me skill-right-backend-api.service.ts?
@abhayraghuwanshi Please finish migrating SkillObjectFactory.ts before starting on a new file.
@tyleri i raised the PR regarding that #8587 
Hello @tyleri , I want to work upon  concept-card-backend-api.service.ts  to migrate from Angular.JS to Angular 8. I am  pretty new to Angular so help me when I am in trouble. Thank you.
> Hello @tyleri , I want to work upon concept-card-backend-api.service.ts to migrate from Angular.JS to Angular 8. I am pretty new to Angular so help me when I am in trouble. Thank you.

Done, I've assigned you to the file. Please message us on Gitter if you need any help.
Sure @tyleri, Thank you.
Any progress @alphaQ1611, @chirag-wadhwa and @chauhanparth210 on the respective parts assigned to you?
@tyleri could you assign me the skill-rights-backend-api.service.ts
> @tyleri could you assign me the skill-rights-backend-api.service.ts

Done.
@bansalnitish Look like currently classroom-creation-backend-service can't be migrated.

Got this error
`Trying to get the Angular injector before bootstrapping the corresponding Angular module.`
Like in #8314 
Hi, I am Anirudh looking forward for gsoc'2020 and want to contribute to Oppia any suggestions for me
@tyleri may I pickup contribution-opportunities-backend-api.service.ts?
@srijanreddy98 Assigned you to it!
@bansalnitish In classroom-creation-backend-service the `Trying to get the Angular injector before bootstrapping the corresponding Angular module.` error is appearing in the console of the browser. I checked the module is using service-bootstrap. Any ideas?
@nishantwrp @tyleri  can you assign change log to #8721
Hey @tyleri ! Can I start working on editable-topic-backend-api.service.ts ?
Hey @adityalpha I have assigned you.
@Showtim3 great. Thank you
Hi @nishantwrp , Referring to your comment -- could you check if that service is being used by any other service? If yes, then this error would come up, right?

Let me know if you need any help or clarity on this. 
I checked I couldn't find any service named `classroom-creation-backend-service` @nishantwrp 
Can I work on collection-rights-backend-api.service.ts?
@h-ARTS Done!
@bansalnitish My bad it was `classroom-creation-backend-api.service`. I think the error shouldn't come up when while we are running the site right? because we have already used `service-bootstrap` in the module. Please correct me if I'm wrong here.
Can someone assign the PR Changelog label and reviewer for my PR? https://github.com/oppia/oppia/pull/8748
I'm sorry @nishantwrp, I cannot find any file named `classroom-creation-backend-api.service`.
@bansalnitish Oh shit! `collection-creation-backend-api.service.ts` it is
Hello, can I work on editable-story-backend-api.service.ts?
@ishitarb5 Yep, I've assigned you. Thanks!
@tyleri   please assign me search-explorations-backend-api.service.ts
@vikasprashar99 Just assigned you
hey @tyleri can you assign me topics-and-skills-dashboard-backend-api.service.ts
@Rajat012k Just assigned you.
@seanlip Hey again, emailed you yesterday about migration. Assign -learner-answer-details-backend-api.service.ts- to me please.
@george-g1 Hey, Assigned you.
Deassigning @george-g1. Please follow the instructions in my email carefully to get set up, including the wiki page I linked to, before you are assigned to any issues. Thanks.
Reassigning @george-g1. 
@tyleri please assign me  exploration-summary-backend-api.service.ts

@vikasprashar99 Could you provide an update on search-explorations-backend-api.service.ts?
@tyleri it's already done
Great, thank you. I've assigned you now.
Question for you @bansalnitish, how do we migrate the other $-imports such as $uibModal for example? It's not immediately clear in the migration wiki?
Hey @brianrodri I think we can use something like [this](https://ng-bootstrap.github.io/#/components/modal/api). 
@tyleri *collection-rights-backend-api.service.ts* is going to be merged once @aks681 has approved the PR. 

Can I move forward with **read-only-exploration-backend-api.service.ts**?
Assigned!
@tyleri **collection-rights-backend-api.service.ts** has been merged. You check this out 👍🎉
Because I found gitter a bit inactive I thought I would ask here, sorry for that.
In **read-only-exploration-backendapi.service.ts**:
```
var _explorationCache = [];

later in code I see follwing:

var _isCached = function(explorationId) {
      return _explorationCache.hasOwnProperty(explorationId);
};

....

cacheExploration: function(explorationId, exploration) {
        _explorationCache[explorationId] = angular.copy(exploration);
},
```
Can anyone tell me why explorationCache is initialized as an Array? Is there a specific reason why not Object?
Hey @h-ARTS, do you mind taking some other service please? 

I've done migrating `ReadOnlyExplorationBackendApiService and EditableExplorationBackendApiService`. Most of the services like these that are used in other services need some special treatment which I'll teach all of you folks once I open a PR for these two. I'm waiting for this PR [#8807](https://github.com/oppia/oppia/pull/8807) to get merged(it is needed to migrate such services).

Apologies for the inconvenience caused!
Regarding the **learner-answer-details-backend-api.service.ts** I can't seem to find the controller/directive that is resolving the http request to add $rootScope.apply(), hence i'm getting errors while running the tests, can anyone help?

The error: https://circleci.com/gh/oppia/oppia/39262?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link
@bansalnitish Sure, then I'll go for **expression-syntax-tree.service.ts**
@tyleri Please assign me.
Thanks @h-ARTS, I've assigned you.

@george-g1 -- I need to defer to @bansalnitish for your question, but just a note: please say "fixes part of #XXX" in your description rather than "fixes #XXX", otherwise GitHub will close this issue once your PR is merged. Thanks! 
@bansalnitish @nishantwrp I think I need a bit of help in Angular Testing. Are you guys free to discuss on gitter chat? 
@h-ARTS Yup, feel free to ping me!
Thanks @nishantwrp for stepping up! Let me know if you guys need any help.
@nishantwrp I texted you on gitter.
Deassigned @adityalpha from `editable-topic-backend-api.service.ts` due to inactivity. Please message if you are still working on it!
@nishantwrp Waiting for your response on gitter, please help 🥺
@h-ARTS Replied you on gitter. 
@tyleri can you assign me editable-skill-backend-api.service.ts
@srijanreddy98 Done!
I want to work on this "topic-rights-backend-api.service.ts" can it be assigned to me? @tyleri 
Hi @vinayakvvg . Actually I started working on topic-rights-backend-api-service and have already completed few parts of it. But i forgot to get assigned. Can you please consider any other option. I apologise for any inconvenience caused. Can you please reconsider. Thanks! 
> Deassigned @adityalpha from `editable-topic-backend-api.service.ts` due to inactivity. Please message if you are still working on it!

@U8NWXD Hey can you reassign this file to me? It's almost done.
Hi @nishantwrp , @tyleri can you assign me some other file for migration as topic-rights-backend-api.service.ts is WIP.
Thanks @vinayakvvg . Can someone please assign me the topic-rights-backend-api-service. Thanks!
Hey @bansalnitish @nishantwrp I'm working on migrating 'EditableTopicBackendApiService'. 1 out of the 10 front-end tests failed. Am I missing something here?
![oppiagit1](https://user-images.githubusercontent.com/20019125/77232700-aa1ed500-6bc8-11ea-8839-e67d1bab7eca.png)
![oppiagit2](https://user-images.githubusercontent.com/20019125/77232703-b145e300-6bc8-11ea-8589-4578e7dbcf9a.png)


Hi @sudiptapradhan1181, I've assigned you `topic-rights-backend-api-service`. Please go ahead!
Hi @adityalpha, I've assigned you 'EditableTopicBackendApiService' (it was removed from your name).

The code in the test file looks fine to me, could you please send me the test file and the corresponding service file? Use pastebin or any online resource and create the links for these two files, I'll copy paste and check what's wrong.

Please let me know if you need any other help.

Thanks!
Thank you @bansalnitish. Here are the two files -
[editable-topic-backend-api.service.ts](https://pastebin.com/6ekWx3tD)
[editable-topic-backend-api.service.spec.ts](https://pastebin.com/F2X9sm9H)

@adityalpha I've reassigned you!
@adityalpha 
````
    let errorResponse = new HttpErrorResponse({
        error: 'test 404 error',
        status: 404,
        statusText: 'Not Found'
      });
      req.error(new ErrorEvent('Error'), errorResponse);
   flushMicrotasks();
````
try this instead of req.flush
Hi @abhayraghuwanshi , @bansalnitish can you assign playthrough-issues-backend-api.service.ts to me

> @adityalpha
> 
> ```
>     let errorResponse = new HttpErrorResponse({
>         error: 'test 404 error',
>         status: 404,
>         statusText: 'Not Found'
>       });
>       req.error(new ErrorEvent('Error'), errorResponse);
>    flushMicrotasks();
> ```
> 
> try this instead of req.flush

@abhayraghuwanshi Hey, thanks! I gave this a try but it did not help, unfortunately. This one test is still failing.
Hi @vinayakvvg, I've assigned you that file. I see you've already issued a PR for that which is OK, but ideally please wait for the file to be assigned to you. Thanks!
Hi @adityalpha -- I checked your files. You were missing `flushMicrotasks()`.

Here is the complete working test suite that was failing for you:
```
  fit('should use the rejection handler when deleting a topic fails',fakeAsync(() => {
      var successHandler = jasmine.createSpy('success');
      var failHandler = jasmine.createSpy('fail');
 
      editableTopicBackendApiService.deleteTopic('1').then(successHandler, failHandler);
      var req = httpTestingController.expectOne('/topic_editor_handler/data/' + '1');
      expect(req.request.method).toEqual('DELETE');
      req.flush('Error deleting topic 1.', {
        status: 500, statusText: 'Invalid Request'
      });
      
      flushMicrotasks();

      expect(successHandler).not.toHaveBeenCalled();
      expect(failHandler).toHaveBeenCalled();
    }
  ));
```

Please let me know if you need any other help. Thanks!
@bansalnitish I realised that I missed that one line and tried once before posting the problem here. However, flushing the microtask queue didn't help and the test still fails.

You think there might be some other problem? Will work on forming the question properly along with the things I already tried now onwards. Regret the inconvenience and Thanks!
Hi, can I work on editable-exploration-backend-api.service.ts?
@nhaancs I've assigned you!
Hey @adityalpha, I ran the complete file and it's working for me. I just added that one line to flushMicrotasks. Could you please post both the files again after adding that line as I recommended? I'll just copy paste both files and re-run the tests to check what's wrong.
@bansalnitish sure. Updated files -
[editable-topic-backend-api.service.ts](https://pastebin.com/6ekWx3tD)
[editable-topic-backend-api.service.spec.ts](https://pastebin.com/F2X9sm9H)

 Hi @tyleri  I am migrating editable-exploration-backend-api.service.ts to Angular 8. This service have a dependency is a another service written in angularjs which is read-only-exploration-backend-api.service.ts. What should I do in this case? @h-ARTS is working on read-only-exploration-backend-api.service.ts
@nhaancs `read-only-exploration-backend-api.service.ts` is already done by @bansalnitish as far as I know.
I'm currently working on `expression-syntax-tree.service.ts`
Hi @adityalpha, I just copy pasted your files and all tests are running fine for me. I'd like to know what and where is the problem?

Thanks for your response @h-ARTS, you are 100% right. I've done that and I'm just waiting for #8807 to go in. 
Hey @bansalnitish it worked. That one line was the problem. I changed a lot of files going through the codebase earlier so was actually making changes to a second copy of the file without realising, my bad.

Will be raising a PR shortly and thank you !
I'm glad to hear it worked for you :). 

Yeah, go ahead and issue a PR for the same. Let me know if you need any help.
Hi @bansalnitish can you please assign Learner-Answer-Details-Backend-Api.Service.ts file to me
Hi @george-g1 -- Are you working on the file assigned to you otherwise I'll assign it to @vinayakvvg ?

@vinayakvvg let's wait for George's response for a day else I'll assign it to you :).
hey @bansalnitish @tyleri @nishantwrp I am working on migrating editable-topic-backend-api-service. I changed a total of 2 files which passed all frontend, linting and typescript checks. (along with adding $rootScope.apply() to controller resolving http request and adding the service to UpgradedServices.ts (adding/removing which has no effect on this problem))
[editable-topic-backend-api.service.ts](https://pastebin.com/6ekWx3tD)
[editable-topic-backend-api.service.spec.ts](https://pastebin.com/F2X9sm9H)

However, some 32 front-end test-cases are failing when I try to push my branch, which are in no way related to the changes I made - [console log](https://pastebin.com/vwpFa7FK). Most of them are of the form -
Error: Trying to get the Angular injector before bootstrapping the corresponding Angular module.

I'm reading up on stuff to solve the issue, however, is there a quick fix to it? 
@adityalpha you only need to modify three files to migrate this service. The three files are editable-topic-backend-api.service.ts, editable-topic-backend-api.service.spec.ts, and topic-editor-page.module.ts .
As you would have seen in the original spec file for the service, there was a mock csrf token service. You will need to provide HTTP_INTERCEPTORS using the class RequestInterceptor in the topic-editor-page.module.ts, so that topic can be edited when using the migrated service. If things are going out of hand for you, I would suggest you create a new branch and just modify these three files.

Hope this helps :).
@vinayakvvg assigned you `Learner-Answer-Details-Backend-Api.Service.ts`.
> @vinayakvvg assigned you `Learner-Answer-Details-Backend-Api.Service.ts`.

Thanks @bansalnitish 
Hey @srijanreddy98 all tests worked after I fetched+merged commits my branch was running behind on. However, made the changes to topic-editor-page.module.ts as I should have. Thank you :)
@nhaancs @vikasprashar99 @chauhanparth210 @chirag-wadhwa any updates on the services assigned to you?
Deassigned @vikasprashar99 based on communication from them
@alphaQ1611 any updates on the service assigned? Let us know if you need any help!
Thanks!
@tyleri `expression-syntax-tree.service.ts` is migrated and done. You can tick `collection-rights-backend-api.service.ts` too and if nobody claimed, can I work on `editable-question-backend-api.service.ts`?
@bansalnitish , Sorry  I will not be able to work on it, I am really sorry about it and please de-assigne me that task. Thank you.

@chauhanparth210 No problem! De assigned you!
Hey @h-ARTS, Thank you for migrating both those files -- awesome stuff. 

I've updated the issue description and assigned you `editable-question-backend-api.service.ts`. Thanks!
> Hey @h-ARTS, Thank you for migrating both those files -- awesome stuff.
> 
> I've updated the issue description and assigned you `editable-question-backend-api.service.ts`. Thanks!

Thanks @bansalnitish 🚀
Hey @vinayakvvg, I see you've migrated the playthrough-issues-backend service. Also, you were assigned this `Learner-Answer-Details-Backend-Api.Service.ts` some days back. I want to confirm are you working on this?
> Hey @vinayakvvg, I see you've migrated the playthrough-issues-backend service. Also, you were assigned this `Learner-Answer-Details-Backend-Api.Service.ts` some days back. I want to confirm are you working on this?

Yes @bansalnitish, I have started working on it, will be making a PR shortly.
Awesome, thanks for the update @vinayakvvg 
@bansalnitish please assign `UserService.ts` to me.
@bansalnitish I think `editable-question-backend-api.service.spec.ts` needs `QuestionObjectFactory` to be migrated first. I'm going to assign another service to myself or should I just continue to work on it?
@h-ARTS You can take QuestionObjectFactory from me. Assigning you that too!

@vinayakvvg Assigned you UserService.
@bansalnitish Thanks 🙂👍
@bansalnitish could you assign me a few files as well to work on?
Hi @nishcthulhu, Could you please specify which file do you want to work on?

@bansalnitish will work on these

 story-creation.service.ts
 learner-answer-info.service.ts
 learner-view-rating.service.ts
@nishcthulhu any updates?
> @nishcthulhu any updates?

Working on concept-card-backend-api service.. testing files keep failing which im trying  to debug
The other files i  mentioned many had rootscope dependecy
Hey @nishcthulhu, I've assigned you the three services based on your PR. In future, please make sure to claim the services and then start working on them. We don't want multiple folks to start working on the same file. It is fine as of now :). Thanks!
> Hey @nishcthulhu, I've assigned you the three services based on your PR. In future, please make sure to claim the services and then start working on them. We don't want multiple folks to start working on the same file. It is fine as of now :). Thanks!

Can you share any 3 other services as well to me
You can take any service that you would like to migrate from the unclaimed ones or may be go and check some service that you can migrate from the tracker. Let me know what all services you want to work on. Thanks!
> You can take any service that you would like to migrate from the unclaimed ones or may be go and check some service that you can migrate from the tracker. Let me know what all services you want to work on. Thanks!

I will take up 
story-creation.service.ts
Learner answer info
Learner view rating

 Some of them have rootscope broadcast which is being received in another file. Are we using event emitter for the same and has it been implemented anywhere else that I can reference?
Nope, we are still working on the $rootScope.$broadcast things.
working on  learner-answer-details-data.service.ts

@h-ARTS taking over exploration-data.service.ts as it is needed for other files as well
@bansalnitish please update as this will need me to take up read-only-exploration-backend-api.service.ts and editable-exploration-backend-api.service.ts
I would like to work on `learner-answer-info.service.ts`
@bansalnitish I don't think we can have `PlaythroughIssuesService` listed here since it depends on `ImprovementModalService` which uses $uibModal and isn't yet migrated. Can you please check that why is it listed in good first issues?

Resolving patch:
diff --git a/scripts/check_frontend_coverage.py b/scripts/check_frontend_coverage.py
--- a/scripts/check_frontend_coverage.py
+++ b/scripts/check_frontend_coverage.py
@@ -73,7 +73,6 @@
     'code-repl-prediction.service.ts',
     'code-string-editor.directive.ts',
     'codemirror-mergeview.directive.ts',
-    'collection-creation.service.ts',
     'collection-details-editor.directive.ts',
     'collection-editor-navbar-breadcrumb.directive.ts',
     'collection-editor-navbar.directive.ts',


Test patch: