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: Fix part of #19435: Migrate Exploration Editor to Angular router #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: Fix part of #19435: Topic editor migration #19747

Assigned(0):

In-review(5):

• Subtopic Viewer (webpack section)

  • PR: Fix part of #19435: Migrate the Subtopic Viewer Page to Angular #20295

• Review Test (webpack section) @Ahmed-Bhouri Fix part of issue #19435: Migrate the Review Test page #20117

• Topic Viewer (webpack section) @abhisheksatpathy Fix part of #19435: Topic Viewer Page migration #20050

• Skill Editor (webpack section) @shivanandan17 Fix part of issue #19435: Migrate Skill Editor Page #19882

• Topics and Skills Dashboard (webpack section) @jnvtnguyen Fix part of #19435: Migrate topics and skills dashboard and creator dashboard #19819

  • Use isCurriculumAdmin for rights
  • Title: Topics and skills dashboard
  • Route: /topics-and-skills-dashboard

• Creator dashboard (webpack section) @jnvtnguyen Fix part of #19435: Migrate topics and skills dashboard and creator dashboard #19819

  • Use IsLoggedIn
  • Title: Creator Dashboard
  • Route: /creator-dashboard

Completed(15):

• Collection Editor (webpack section) @pritam2317 Fix part of #19435: Migrate collection editor page #20116

• Facilitator Dashboard (webpack section) @sagar-subedi Fix part of #19435: Migrate Facilitator Dashboard #20022

• Diagnostic test player (webpack section) Fix part of #19435: Migrate diagnostic test player page #19811

  • Open access, so no auth guard is needed!
  • Title: Diagnostic test player
  • Route: /diagnostic-test-player

• Voiceover admin @Nik-09 Introduces voice artist card in voiceover admin page #19884

• Collection Player (webpack section) @amaanlari Fix part of issue #19435: Migrate the Collection Player page to Angular Router #19901

• Learner Group Creator (webpack section) @AFZL210 Fix part of #19435: Migrate Learner Group Creator page #19826

• Contributor dashboard Admin(webpack section) @shivanandan17 [16th Jan] Fix part of issue #19435: Migrate contributor dashboard Admin Page #19703

  • Use isTranslationAdmin OR isQuestionAdmin
  • Title: Contributor Dashboard Admin
  • Route: /contributor-dashboard-admin

• Blog Dashboard (webpack section) @AFZL210 Fix part of #19435: Blog dashboard page migration #19815

  • Use IsBlogAdmin OR IsBlogEditor
  • Title: Blog Dashboard
  • Route: /blog-dashboard
  • PRs for reference: Fix part of #19435: Migrate Blog Dashboard Page #19589

• Learner Group Editor (webpack section) @AFZL210 Fix part of #19435: Learner group editor page migration #19761

• Classroom Admin (webpack section) @Vir-8 Fix part of #19435: Learner dashboard and curriculum admin page migration #19508

  • Use isCurriculumAdmin
  • Title: Curriculum admin
  • Route: /classroom-admin

• Email Dashboard (webpack section) @sagar-subedi Fix part of #19435: Migrate Email Dashboard #19627

  • Use isSuperAdmin
  • Title: Email Dashboard
  • Route: /email-dashboard

• Learner dashboard (webpack section) @Vir-8 Fix part of #19435: Learner dashboard and curriculum admin page migration #19508

  • Use IsLoggedIn
  • Title: Learner Dashboard
  • Route: /learner-dashboard

• Contributor dashboard (webpack section) @jnvtnguyen Fix part of #19435: Migrate Contributor Dashboard #19467

  • No route guard is needed as this page can be accessed by any user.
  • Title: Contributor Dashboard
  • Route: /contributor-dashboard

• Blog admin (webpack section) @Vir-8 #Fix part of #19435: Migrate Blog Admin page #19471

  • Use isBlogAdmin to check rights
  • Title: Blog Admin
  • Route: /blog-admin

• Moderator (webpack section) @jnvtnguyen Fix part of issue #19435: Migrate Moderator Page #19449

  • Use isModerator
  • Title: Moderator
  • Route: /moderator

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.)
3. 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:

• Remove /console-errors page as it's no more needed.
• Render /maintenance page via OppiaRootHandler nad move the maintenance page to angular.

[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

[KaterinaNakou2003]

Hello @DubeySandeep can i be assigned to something too?

[DubeySandeep]

@KaterinaNakou2003 I've assigned you to Story Editor!

[DubeySandeep]

Unassigned @Happyashbunny because of lack of activity!

@abhisheksatpathy @pritam2317 Any update on the assigned part of the issue?

[KaterinaNakou2003]

@DubeySandeep Thank you!!

[pritam2317]

Hi @DubeySandeep by tomorrow, I will create a pull request; only the backend testing portion is left.
Thanks you:)

[abhisheksatpathy]

@DubeySandeep ran into some errors, resolving them as of the moment. I'm really sorry for the delays, my mid-semester exams were going on.
Will finish this asap!

[abhisheksatpathy]

@DubeySandeep could you assign me subtopic viewer in the meantime?

[Ahmed-Bhouri]

Hello @DubeySandeep
can i be assigned to something?

[DubeySandeep]

@abhisheksatpathy I've reviewed your PR and looks like it needs some work, for now, let's focus on that PR and once it's in a good state I'll assign you another task from this issue. I hope that's fine!

@Ahmed-Bhouri I've assigned you to Review Test!

@Lawful2002 Thanks for helping with this issue :), leave a comment when assigning anyone the task it helps better track the issue.

[DubeySandeep]

@pritam2317 Any update on the assigned task?

[pritam2317]

@DubeySandeep Sorry for the delay; I was busy writing a proposal. I'll create a PR within tommorow.

[abhisheksatpathy]

Hi @DubeySandeep, My PR got closed(stale) as I have exams going on rn. I will open another PR on migration of topic viewer page asap! Sorry for the troubles