Migration of Individual Pages from Webpack/AngularJS to Lazy-Loaded Angular Modules

[DubeySandeep]

Description:

This issue aims to move individual page compilations from using Webpack (as AngularJS modules) to lazy-loaded Angular modules. This migration ensures each page has its own Angular module and is loaded only when needed, enhancing application performance. It also facilitates the shift from the AngularJS compilation process to Angular modules. Completing this migration will allow for the removal of Webpack and AngularJS-related code from our codebase.

Routes requiring these changes:

Ready for work:

• [ ] exploration_editor (@srijanreddy98)

  • Old PR: https://github.com/oppia/oppia/pull/19889
  • Work needed in the above PR: Add a route guard for the exploration editor page!

• [ ] Story Editor (webpack section)

• [ ] Topic Editor (webpack section)

  • Old PR: https://github.com/oppia/oppia/pull/19747

• [ ] email_dashboard_result (webpack section)

Assigned(0):

In-review(5):

- [ ] Subtopic Viewer ([webpack section](https://github.com/oppia/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L469)) - PR: https://github.com/oppia/oppia/pull/20295 - [ ] Review Test ([webpack section](https://github.com/oppia/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L437)) @Ahmed-Bhouri https://github.com/oppia/oppia/pull/20117 - [ ] Topic Viewer ([webpack section](https://github.com/oppia/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L504)) @abhisheksatpathy https://github.com/oppia/oppia/pull/20050 - [ ] Skill Editor ([webpack section](https://github.com/oppia/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L446)) @shivanandan17 https://github.com/oppia/oppia/pull/19882 - [ ] Topics and Skills Dashboard ([webpack section](https://github.com/DubeySandeep/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L490-L502)) @jnvtnguyen https://github.com/oppia/oppia/pull/19819 - Use[ isCurriculumAdmin for rights](https://github.com/DubeySandeep/oppia/blob/28c396663b6616e38e42d558d829dad897064f68/core/templates/domain/user/user-info.model.ts#L93-L99) - Title: Topics and skills dashboard - Route: [/topics-and-skills-dashboard](https://github.com/oppia/oppia/blob/a3919935f2bc40f915814e981a86db60f4ba8a23/main.py#L430-L433) - [ ] Creator dashboard ([webpack section](https://github.com/DubeySandeep/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L270-L280)) @jnvtnguyen https://github.com/oppia/oppia/pull/19819 - Use [IsLoggedIn](https://github.com/oppia/oppia/blob/bb0eeeed0e109443e3ad9c3488db07379f7754c1/core/templates/domain/user/user-info.model.ts#L142) - Title: Creator Dashboard - Route: [/creator-dashboard](https://github.com/oppia/oppia/blob/a3919935f2bc40f915814e981a86db60f4ba8a23/main.py#L332-L334)

Completed(15):

- [x] Collection Editor ([webpack section](https://github.com/oppia/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L228)) @pritam2317 https://github.com/oppia/oppia/pull/20116 - [x] Facilitator Dashboard ([webpack section](https://github.com/oppia/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L515)) @sagar-subedi https://github.com/oppia/oppia/pull/20022 - [x] Diagnostic test player ([webpack section](https://github.com/DubeySandeep/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L196-L209)) https://github.com/oppia/oppia/pull/19811 - Open access, so no auth guard is needed! - Title: Diagnostic test player - Route: [/diagnostic-test-player](https://github.com/oppia/oppia/blob/a3919935f2bc40f915814e981a86db60f4ba8a23/main.py#L430-L433) - [x] Voiceover admin @Nik-09 https://github.com/oppia/oppia/pull/19884 - [x] Collection Player ([webpack section](https://github.com/oppia/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L243)) @amaanlari https://github.com/oppia/oppia/pull/19901 - [x] Learner Group Creator ([webpack section](https://github.com/oppia/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L526)) @AFZL210 https://github.com/oppia/oppia/pull/19826 - [x] Contributor dashboard Admin([webpack section](https://github.com/DubeySandeep/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L281-L291)) @shivanandan17 [16th Jan] #19703 - Use [isTranslationAdmin OR isQuestionAdmin](https://github.com/DubeySandeep/oppia/blob/28c396663b6616e38e42d558d829dad897064f68/core/templates/domain/user/user-info.model.ts#L93-L99) - Title: Contributor Dashboard Admin - Route: [/contributor-dashboard-admin](https://github.com/oppia/oppia/blob/a3919935f2bc40f915814e981a86db60f4ba8a23/main.py#L312-L314) - [x] Blog Dashboard ([webpack section](https://github.com/DubeySandeep/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L216-L226)) @AFZL210 #19815 - Use [IsBlogAdmin OR IsBlogEditor](https://github.com/oppia/oppia/blob/bb0eeeed0e109443e3ad9c3488db07379f7754c1/core/templates/domain/user/user-info.model.ts#L90-L96) - Title: Blog Dashboard - Route: [/blog-dashboard](https://github.com/oppia/oppia/blob/a3919935f2bc40f915814e981a86db60f4ba8a23/main.py#L1015-L1017) - PRs for reference: https://github.com/oppia/oppia/pull/19589 - [x] Learner Group Editor ([webpack section](https://github.com/oppia/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L537)) @AFZL210 https://github.com/oppia/oppia/pull/19761 - [x] Classroom Admin ([webpack section](https://github.com/DubeySandeep/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L178-L195)) @Vir-8 https://github.com/oppia/oppia/pull/19508 - Use [isCurriculumAdmin](https://github.com/oppia/oppia/blob/bb0eeeed0e109443e3ad9c3488db07379f7754c1/core/templates/domain/user/user-info.model.ts#L98) - Title: Curriculum admin - Route: [/classroom-admin](https://github.com/oppia/oppia/blob/a3919935f2bc40f915814e981a86db60f4ba8a23/main.py#L438-L440) - [x] Email Dashboard ([webpack section](https://github.com/DubeySandeep/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L303-L313)) @sagar-subedi https://github.com/oppia/oppia/pull/19627 - Use [isSuperAdmin](https://github.com/oppia/oppia/blob/bb0eeeed0e109443e3ad9c3488db07379f7754c1/core/templates/domain/user/user-info.model.ts#L122) - Title: Email Dashboard - Route: [/email-dashboard](https://github.com/oppia/oppia/blob/a3919935f2bc40f915814e981a86db60f4ba8a23/main.py#L941-L942) - [x] Learner dashboard ([webpack section](https://github.com/oppia/oppia/blob/a3919935f2bc40f915814e981a86db60f4ba8a23/main.py#L497-L499)) @Vir-8 https://github.com/oppia/oppia/pull/19508 - Use [IsLoggedIn](https://github.com/oppia/oppia/blob/bb0eeeed0e109443e3ad9c3488db07379f7754c1/core/templates/domain/user/user-info.model.ts#L142) - Title: Learner Dashboard - Route: [/learner-dashboard](https://github.com/oppia/oppia/blob/a3919935f2bc40f915814e981a86db60f4ba8a23/main.py#L500-L502) - [x] Contributor dashboard ([webpack section](https://github.com/DubeySandeep/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L281-L291)) @jnvtnguyen https://github.com/oppia/oppia/pull/19467 - No route guard is needed as this page can be accessed by any user. - Title: Contributor Dashboard - Route: [/contributor-dashboard](https://github.com/oppia/oppia/blob/a3919935f2bc40f915814e981a86db60f4ba8a23/main.py#L312-L314) - [x] Blog admin ([webpack section](https://github.com/DubeySandeep/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L161-L177)) @Vir-8 #https://github.com/oppia/oppia/pull/19471 - Use [isBlogAdmin](https://github.com/oppia/oppia/blob/develop/core/templates/domain/user/user-info.model.ts#L90) to check rights - Title: Blog Admin - Route: [/blog-admin](https://github.com/oppia/oppia/blob/a3919935f2bc40f915814e981a86db60f4ba8a23/main.py#L994) - [x] Moderator ([webpack section](https://github.com/DubeySandeep/oppia/blob/b2584523e4eacb67f08bea027de5b600051cc680/webpack.common.config.ts#L395)) @jnvtnguyen #19449 - Use [isModerator](https://github.com/oppia/oppia/blob/bb0eeeed0e109443e3ad9c3488db07379f7754c1/core/templates/domain/user/user-info.model.ts#L86) - Title: Moderator - Route: [/moderator](https://github.com/oppia/oppia/blob/a3919935f2bc40f915814e981a86db60f4ba8a23/main.py#L618)

Required changes:

Before making any changes, please navigate to the relevant page on your local machine (on the develop branch) and check that you understand how to reach it. Try out the behaviour of that page to get some idea of how it works, so that you can verify that the page continues to work fine after the changes below.

Backend changes:

1. Register the Page:

   • Add the page to constants.PAGES_REGISTERED_WITH_FRONTEND. Reference

2. Remove Backend Handler:

   • Remove the backend handler that returns <page-name>.mainpage.html. Reference
   • Update the associated backend tests accordingly. Reference

3. Remove URL-to-handler linkage in main.py:

   • In main.py, remove the line that links url to the old handler which is removed in the above step. Reference Note: For each task, a link to the relevant URL-to-handler linkage in main.py is provided under the 'Route' bullet.

4. Add access validator

   • Add an access validator handler in access_validator.py
     • Use the acl_decorator deleted from the Page handler on step 2.
   • Add URL for the validator in main.py (Reference)
   • Write a backend test for the new validator class. (Reference)

Frontend changes:

1. Delete Redundant File:

   • Remove the <page-name>.mainpage.html file. Reference

2. Create Route Guard:

   • Create an access validator function in the access-validator backend service. (Reference)
   • Create a route guard file for the module. Reference
   • In the canActivate function make a call to the newly created access-validator function and return true if the user has permission else route to the error page and return false. Reference

3. Component Upgrade:

   • Remove downgradeComponent from the page component. Reference

4. Create Root Component Files:

   • Create <module-name>.root.component.ts with title and meta. Reference
   • Create <module-name>.root.component.html. The template should use the relevant page-component. Reference

5. Update Main Module:

   • Remove providers, Browser*Module, any HTTP module, and everything related to the router module. Reference
   • Eliminate ngDoBootstrap from the module class and all code below the module class. Reference
   • Add router configuration in the module: Reference

     RouterModule.forChild([
     {
      path: '',
      component: <ModuleName>RootComponent,
      canActivate: [<NewRouteGuard>],
     },
     ]),

6. Update Components in Module:

   • For each component in the declarations of <module-name>.module.ts:
     • Remove downgradeComponent from the bottom. References
     • If it's a navigation-related component, change smartRouterLink to routerLink. Reference

7. Add Module to App Routing:

   • Include the module in app.routing.module.ts with IsLoggedInGuard [if required]. Reference

8. Update Webpack Configuration:

   • Remove the module from the webpack configuration. Reference

How to test all the changes:

1. Run the development server
2. As each of the following users, go to the URL of the page you migrated:
   • Admin (Should be able to access the page, if it's allowed)
   • User who should have rights on the page (Should be able to load the page)
   • User doesn't have rights to use the page (Page should be loaded with 401/404 status.)
     4. If this page is accessible from any links on the home page or the footer, click those links and verify that the page loads correctly.

Helpful Tips

Reference Pull Request (PR): While working on your changes, refer to the PR at #18855. Your updates may not require all the modifications in that PR, but they will likely overlap.

Seeking Help: If you encounter persistent errors after applying your changes and can't resolve them despite multiple attempts, you can seek assistance from @DubeySandeep and others. To do this effectively:

• Prepare a Draft PR: Initiate a draft pull request on GitHub incorporating all your changes.

  • Document Your Attempts: Create a debugging doc to fully describe the issues you are running into and the solutions you've tried, so that others can help you more easily.
  • Reach Out for Help: Contact @DubeySandeep via email (dubeysandeep.in@gmail.com). Include in your communication:
  • The specific error you're encountering.
  • The link to your draft PR.
  • The debugging doc, which includes the list of solutions you've already attempted.
  • Email title with "Need help with #19435"

  In addition, please leave a comment on this issue thread with the above details as well.

  ---

  To remove webpack requirements for the codebase, firstly we need to get #19435 resolved though even after this we will be left with some pages which cannot be removed using the steps mentioned in #19435. This issue list outs all the remaining tasks (excluding #19435) required to be completed before removing webpack:

• [ ] Check weather this is needed: error_iframed
• [ ] Remove /console-errors page as it's no more needed.
• [ ] Render /maintenance page via OppiaRootHandler nad move the maintenance page to angular.
• [ ] Consolidate error module https://github.com/oppia/oppia/issues/19154

[jnvtnguyen]

Hi @DubeySandeep, Can I work on this issue?

[DubeySandeep]

@jnvtnguyen I've assigned you to Moderator, you can start working on it! Also, I've sent you a message on Google Chat to keep in touch (send me an email in case you are not on google-chat).

[jnvtnguyen]

@DubeySandeep Alright, do I create a pull request when I finish the Moderator migration?

[Vir-8]

Hey @DubeySandeep, can I work on a page too?

[DubeySandeep]

@DubeySandeep Alright, do I create a pull request when I finish the Moderator migration?

@jnvtnguyen Yes! Also, you can create a draft PR if after completing all the steps mentioned above you are not able to fix any issue raised during testing! (This will help me check the changes and guied you better!)

[DubeySandeep]

Hi @Vir-8 Thanks for showing interest in this issue! :)

I've assigned you to Blog admin, you can start working on it! Let me know if you have any questions or need any help! :)

[Vir-8]

Sure thing, thanks!

[DubeySandeep]

Assigning Creator dashboard to @jysin330

@jysin330 You can start working on it, let me know if you need any help! :) (Also, you can use #19449 for reference.)

[jnvtnguyen]

Hi, I will work on the Contributor Dashboard Migration.

[jysin330]

Sure @DubeySandeep .Thank you for assigning me to issue #19453.

[retrogtx]

Hi @DubeySandeep can I be assigned something?

[DubeySandeep]

@retrogtx I've assigned you to Email Dashboard, you can start working on it! Let me know if you have any questions. Good luck! :)

[shivanandan17]

Hi @DubeySandeep ,

I am new to open source. I would like to contribute to the community and I would like to start from here. Can I be assigned with something?

Also, Is there any other way I can communicate with you? As github discussion is kinda confusing for me. Thank you in advance.

[arnavchhokra]

Hi @DubeySandeep , can I be assigned something?

[Vir-8]

@DubeySandeep Sure thing, I'd love to work on migrating another page

[DubeySandeep]

@shivanandan17 @arnavchhokra Thanks for showing interest in this issue, as this issue is critcal and needs to be resolved quickly, I'm only assigning it to someone completed devlopment env setup. Can you please share a screenshot presenting a running development env?

[DubeySandeep]

@Vir-8 I've assigned you to Learner dashboard & Curriculum admin, feel free to initiate one PR with both the section. I hope that's fine, let me know in case you only want to work on one at a time! :)

Note: Learner dashboard is simple and won't need any new route gaurd.

[arnavchhokra]

@DubeySandeep ,

[DubeySandeep]

@arnavchhokra Thanks for sharing the screenshot, I've assigned you to Blog Dashboard, you can start working on it. Also, you can take #19471 for reference (if needed). Let me know if you have any questions, I'll be more than happy to help. Good luck!

[shivanandan17]

@DubeySandeep

[Vir-8]

Hey @DubeySandeep, the current route for the curriculum admin page is /classroom-admin, are we changing it to /curriculum-admin?

[seanlip]

No -- let's still keep it as classroom-admin. Thanks for checking!

[DubeySandeep]

Hey @DubeySandeep, the current route for the curriculum admin page is /classroom-admin, are we changing it to /curriculum-admin?

Sorry, I had added the wrong route in the issue, please use the existing one! (I've updated the issue now!)

[DubeySandeep]

@shivanandan17 Thanks for sharing the screenshot. I've assigned you to the Contributor dashboard admin section, please check the assigned part of the issue for more details. Let me know if you have any questions.

For some reason http://localhost:8181/learn/math shows error 404

Don't worry that's expected, you'll have to populate the classroom data.

[arnavchhokra]

@DubeySandeep , should I also do the blog post editor?

[DubeySandeep]

@arnavchhokra I'll be more than happy to assign you to other parts of this issue, just to avoid overloading and complicate your first PR experience, I'll suggest creating the first PR with one section.

Do let me know once you initiate your first PR, I'll go ahead and assign you 2 more that you can work togther. I hope that's fine! (and thanks again for helping with this issue!)

EDIT:

@arnavchhokra Where do you see the blog-post-editor page? I couldn't find it, making sure I'm not missing anything.

[arnavchhokra]

@DubeySandeep

[shivanandan17]

@DubeySandeep I am getting this after pull request. Is this common?

[DubeySandeep]

@shivanandan17 That's not expected, looks like you have not signed the CLA and oppiaBot has reported the same on your PR. Can you please do that and make sure to fully read and follow the getting started wiki page?

[shivanandan17]

@DubeySandeep Okai sir.

[DubeySandeep]

@arnavchhokra Thanks for sharing the screenshot, I'm not sure why it's not in the issue, I'll check and update the issue accordingly. Feel free to initiate your PR for Blog Dashboard and let's focus on other pages in a separate PR!

[arnavchhokra]

@DubeySandeep , I was having some issues with chrome headless tests, can I contact you?

[DubeySandeep]

@arnavchhokra Feel free to reach out to me on my email (provided above)! Also, you can report setup issues on discussions.

[sagar-subedi]

Hi, @DubeySandeep . Is there any page that I can work on. Thanks.

[shivanandan17]

Hello @DubeySandeep and @seanlip sir, I think some parts of Contributor dashboard admin page is still in the Angular Js format and I am facing frontend issues while migrating using above instructions. Can you please let me know if there are any changes that has to be done before doing migration to Lazy-Loaded Angular Modules for the Contributor dashboard admin page?

Update (Found this to be possible reason for frontend errors while migrating to Lazy-Loaded Angular Modules):

1. Migrating the logic part (ts file) is not done for core/templates/pages/contributor-dashboard-admin-page/contributor-dashboard-admin-page.component.ts
2. Migrating an HTML file is not done for core/templates/pages/contributor-dashboard-admin-page/contributor-dashboard-admin-page.component.html

Can I get another page to work on?

[vaishnavi192]

Hey @DubeySandeep can you also assign me a page. I have oppia server running on docker.

[rahat2134]

@DubeySandeep if there any page where i can work. Thank You. 🙂

[DubeySandeep]

Unassigning @retrogtx from Email dashboard because of lack of activity.

@sagar-subedi @vaishnavi192 @rahat2134 , I've assigned you to Email Dashboard, Diagnostics test player & Topics and skills dashboard respectively. You can start working on it!

[arnavchhokra]

hi @DubeySandeep , i have sent you a mail regarding an issue.

[DubeySandeep]

@shivanandan17 Thanks for reporting the issue, will it be possible for you to migrate the code to angular? I can help in case needed!

This might get complicated and I'm fine assigning you to another part, let me know as needed!

[shivanandan17]

@DubeySandeep I am willing to migrate it to Angular sir. But a little guidance will be helpful for me sir.

[DubeySandeep]

@shivanandan17 That's great, you can find multiple PRs in this issue which migrates component to angular: https://github.com/oppia/oppia/issues/9749 Let me know if you need anything else.

[amaanlari]

Hey @DubeySandeep I would like to migrate Topic editor. Can I get assigned to do it ?

[jysin330]

Hi @DubeySandeep . Encountered a 404 error on the Creator Dashboard. Need your guidance to resolve. Could you please guide me on how to resolve this issue?

[alyaa999]

Hi @DubeySandeep , can I be assigned Topic editor?

[hrshkshri]

Hi @DubeySandeep, Can I get assigned to any of the pages for migration? : )

[PointBreak600]

Hi @DubeySandeep is there any page that I can get assigned to for migration? It's my first issue here.

[Happyashbunny]

Hello @DubeySandeep I am interested in working on this issue is there anything particular that you can assign to me too. I'd love to contribute

[abhisheksatpathy]

hello @DubeySandeep, could you please assign me topic editor?

[DubeySandeep]

Hi @Happyashbunny @PointBreak600 @abhisheksatpathy @alyaa999 @amaanlari

Sorry for the delay, unexpectedly most of the tasks were blocked and we couldn't assign anyone! Now, it's unblocked and ready for pick! :)

If you are still interested and have completed setting up the development environment, please share a screenshot of the local webpage, and I'll assign you to a task! Also, let me know if you have any other questions!