Upgrade to angular 16 #2871

atarix83 · 2024-03-21T18:18:41Z

References

Fixes Upgrade to Angular 16 #2752

Description

This PR provide upgrade to angular 16

Instructions for Reviewers

List of changes in this PR:

since view engine libraries are no longer supported we had to :
- remove ngx-sortablej and replaced it by usig the angular cdk drag/drop module.
- remove markdown-it-mathjax3. Since this was only a plugin to support the MathJax for the markdown-it library we decide to use directly the MathJax library. It's not a direct dependency but we've implemented a service for injecting the script by retrieving it from a CDN. In this way we don't need to add to the bundle a so heavy dependency.
Node 16 is no longer supported so i've also changed the github workflow in order to run CI for version 18 and 20 of node

Include guidance for how to test or review your PR.
Review this PR by running the application (against sandbox rest server) to verify everything works properly as the current sandbox environment.

Checklist

This checklist provides a reminder of what we are going to look for when reviewing your PR. You need not complete this checklist prior to creating your PR (draft PRs are always welcome). If you are unsure about an item in the checklist, don't hesitate to ask. We're here to help!

My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
My PR passes ESLint validation using yarn lint
My PR doesn't introduce circular dependencies (verified via yarn check-circ-deps)
My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
If my PR fixes an issue ticket, I've linked them together.

…BrowserModule import

…ement.setAttribute error)

…le-upload

DURACOM-238 update ng2 file upload Approved-by: Andrea Barbasso

…ule inside form.module.ts

# Conflicts: # package.json # src/app/access-control/epeople-registry/eperson-resolver.service.ts # src/app/admin/admin-registries/bitstream-formats/bitstream-formats.resolver.ts # src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts # src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts # src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.ts # src/app/app.module.ts # src/app/bitstream-page/bitstream-page.resolver.ts # src/app/bitstream-page/legacy-bitstream-url.resolver.ts # src/app/browse-by/browse-by-guard.ts # src/app/collection-page/collection-page.resolver.ts # src/app/collection-page/create-collection-page/create-collection-page.guard.ts # src/app/collection-page/edit-item-template-page/item-template-page.resolver.ts # src/app/community-page/community-page.resolver.ts # src/app/community-page/create-community-page/create-community-page.guard.ts # src/app/core/auth/auth-blocking.guard.ts # src/app/core/auth/authenticated.guard.ts # src/app/core/breadcrumbs/dso-breadcrumb.resolver.ts # src/app/core/breadcrumbs/i18n-breadcrumb.resolver.ts # src/app/core/breadcrumbs/quality-assurance-breadcrumb.resolver.ts # src/app/core/data/feature-authorization/feature-authorization-guard/dso-page-single-feature.guard.spec.ts # src/app/core/data/feature-authorization/feature-authorization-guard/dso-page-some-feature.guard.spec.ts # src/app/core/data/feature-authorization/feature-authorization-guard/dso-page-some-feature.guard.ts # src/app/core/data/feature-authorization/feature-authorization-guard/some-feature-authorization.guard.ts # src/app/core/end-user-agreement/abstract-end-user-agreement.guard.ts # src/app/core/feedback/feedback.guard.ts # src/app/core/reload/reload.guard.ts # src/app/core/server-check/server-check.guard.ts # src/app/core/submission/resolver/submission-object.resolver.ts # src/app/home-page/home-page.resolver.ts # src/app/init.service.ts # src/app/item-page/edit-item-page/edit-item-page.component.spec.ts # src/app/item-page/edit-item-page/edit-item-page.component.ts # src/app/item-page/item.resolver.ts # src/app/item-page/version-page/version.resolver.ts # src/app/lookup-by-id/lookup-guard.ts # src/app/menu.resolver.ts # src/app/my-dspace-page/my-dspace.guard.ts # src/app/process-page/process-breadcrumb.resolver.ts # src/app/process-page/process-page.resolver.ts # src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.resolver.ts # src/app/quality-assurance-notifications-pages/quality-assurance-source-page-component/quality-assurance-source-data.resolver.ts # src/app/quality-assurance-notifications-pages/quality-assurance-source-page-component/quality-assurance-source-page-resolver.service.ts # src/app/quality-assurance-notifications-pages/quality-assurance-topics-page/quality-assurance-topics-page-resolver.service.ts # src/app/register-email-form/registration.resolver.ts # src/app/register-page/registration.guard.ts # src/app/request-copy/request-copy.resolver.ts # src/app/search-page/configuration-search-page.guard.ts # src/app/shared/context-help.directive.ts # src/app/shared/dso-page/dso-edit-menu.resolver.ts # src/app/shared/form/chips/chips.component.spec.ts # src/app/shared/form/chips/chips.component.ts # src/app/shared/form/form.module.ts # src/app/shared/metadata-representation/metadata-representation-loader.component.ts # src/app/shared/mydspace-actions/claimed-task/switcher/claimed-task-actions-loader.component.ts # src/app/shared/resource-policies/resolvers/resource-policy-target.resolver.ts # src/app/shared/resource-policies/resolvers/resource-policy.resolver.ts # src/app/shared/theme-support/themed.component.ts # src/app/shared/utils/markdown.pipe.ts # src/app/submission/sections/upload/accessConditions/submission-section-upload-access-conditions.component.ts # src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-actions-loader/advanced-workflow-actions-loader.component.ts # src/app/workflowitems-edit-page/item-from-workflow.resolver.ts # src/app/workflowitems-edit-page/workflow-item-page.resolver.ts # src/app/workspaceitems-edit-page/item-from-workspace.resolver.ts # src/app/workspaceitems-edit-page/workspace-item-page.resolver.ts # src/config/app-config.interface.ts # src/main.server.ts # src/modules/app/browser-app.module.ts # src/modules/app/browser-init.service.ts # src/modules/app/server-app.module.ts # src/modules/app/server-init.service.ts # src/ngx-translate-loaders/translate-browser.loader.ts # src/ngx-translate-loaders/translate-server.loader.ts # src/themes/custom/lazy-theme.module.ts # src/themes/dspace/lazy-theme.module.ts # yarn.lock

…ote data operators

atarix83 · 2024-04-02T17:14:58Z

sorry @tdonohue the PR was not yet ready to be reviewed again. Now it should if all tests pass.

@artlowel @tdonohue
Regarding the deprecated interfaces for revolvers and guards, I've applied the following changes:

all revolvers have been migrated in order to use functional resolvers
all the guards which didn't use class inheritance have been migrated in order to use functional guards
for all the other guards whose migration would have taken too long due to the use of class inheritance (the ones which extend SomeFeatureAuthorizationGuard class) i've use the helper function mapToCanActivate provided by Angular. I suggest to open a follow-up task for migrating all of them to functional guards if you agree

tdonohue · 2024-04-02T23:07:52Z

NOTE: I think the e2e test failures are now because of CSRF issues with our Cypress test suite. Now that DSpace/DSpace#9321 is merged on the backend, I think that slightly changed the CSRF behavior (the changes were caused by Spring Security 6, not by us). This difference in behavior appears to be causing Cypress to fail whenever it tries to login.

So, I think the e2e test failures here are NOT an issue with this PR as they are not reproducible in the UI. Instead it is an issue with our Cypress test suite -- I'm looking into it, but I think it can be ignored for now. If we have to we could temporarily disable the failing Cypress tests while we fix them.

artlowel

Thanks @atarix83!

for all the other guards whose migration would have taken too long due to the use of class inheritance (the ones which extend SomeFeatureAuthorizationGuard class) i've use the helper function mapToCanActivate provided by Angular. I suggest to open a follow-up task for migrating all of them to functional guards if you agree

That's fine

One more thing though: the convention is for function names to start with a lowercase letter, and class names to start with a capital letter. All resolver-functions in this PR still start with a capital letter. If you can still fix it, that would be great, or you can add it to the ticket to clean up the guards.

tdonohue · 2024-04-03T15:05:18Z

@atarix83 and @artlowel : I've verified that the remaining e2e test failures in this PR also exist on main. They are also visible on this new PR from dependabot: #2881

I'm working on a fix to these issues. The problem is that the CSRF token is not being initialized properly before the e2e tests run, which causes the e2e tests to not be able to login (i.e. all tests that require authentication are failing).

The fix is to pre-initialize the CSRF token.. I'm borrowing code from #2838 (created by @artlowel 's team) and updating it to fix the issue. With these fixes, the e2e tests are working now on my end, but I'm doing some minor code cleanup & I'll create a PR for this shortly.

…ame convention

… convention

atarix83 · 2024-04-03T16:58:38Z

One more thing though: the convention is for function names to start with a lowercase letter, and class names to start with a capital letter. All resolver-functions in this PR still start with a capital letter. If you can still fix it, that would be great, or you can add it to the ticket to clean up the guards.

@artlowel done

github-actions · 2024-04-03T19:44:00Z

Hi @atarix83,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

tdonohue · 2024-04-03T19:44:26Z

@atarix83 : I've just merged #2886 which fixes the e2e test errors. If you rebase this PR on the latest main (and fix the minor merge conflicts), your e2e tests should now succeed.

# Conflicts: # src/app/core/data/request.service.ts # src/modules/app/browser-app.config.ts # src/modules/app/server-app.config.ts

atarix83 · 2024-04-04T08:06:36Z

@tdonohue
I've aligned this on main branch.

@artlowel @tdonohue
Looking at the #2886 i'm wondering if the code added here should be refactored in a better way.
I think the better place to do that check is the effect related to the dispatched ngrx action (https://github.com/DSpace/dspace-angular/blob/main/src/app/core/data/request.effects.ts#L43). In this way we avoid to add a nested subscription.
@artlowel do you agree? if so i can do the change in this PR

artlowel · 2024-04-04T09:16:16Z

@atarix83 I agree that refactor would be a good idea, However I wouldn't hold up this PR to do it. I'd rather do it in a small bugfix PR next week.

tdonohue

👍 Thanks @atarix83 ! As discussed in today's dev meeting, I'm merging this immediately. The code looks good & I've verified it's working. The only outstanding issues are the refactor you mentioned above and the potential security vulnerability reported by CodeQL. I'm going to move those both to follow-up tickets & assign to you so that they can be fixed prior to 8.0 final.

Andrea Barbasso and others added 30 commits February 12, 2024 16:09

update typescript

a98039c

run ng update @angular/core@16 @angular/cli@16 --force

9b213b6

update custom-webpack

2195ca4

import renderModule instead of renderModuleFactory

4e6d90b

provide APP_ID instead of BrowserModule.withServerTransition, remove …

6cdb3d1

…BrowserModule import

do not use componentFactories anymore

3794007

change TransferState import

bc29293

remove or update libraries

53e8b69

update missing dependencies

387f5ee

remove mathjax (it uses the xmldom-sre library, that has a documentEl…

5ff253e

…ement.setAttribute error)

Upgrade ng2-file-upload to v5.0.0

0ce10b4

[DURACOM-238] add missing imports in standalone component

a2e3b08

[DURACOM-238] add missing imports in standalone component

377b217

Merged DURACOM-191-align-to-angular-16 into DURACOM-238-update-ng2-fi…

6b538fa

…le-upload

Merged in DURACOM-238-update-ng2-file-upload (pull request DSpace#1413)

2660601

DURACOM-238 update ng2 file upload Approved-by: Andrea Barbasso

[DURACOM-237] - Added DragDropModule which replaced the SortablejsMod…

3051fa8

…ule inside form.module.ts

[DURACOM-237] - Refactoring ts based on @angular/cdk/drag-drop

3807a35

[DURACOM-237] - Refactoring html based on @angular/cdk/drag-drop

0c80b1a

[DURACOM-237] - Refactoring scss based on @angular/cdk/drag-drop

dbf6b9d

[DURACOM-237] - Refactoring html based on @angular/cdk/drag-drop

e092914

[DURACOM-237] - Refactoring scss based on @angular/cdk/drag-drop

9e724f3

[DURACOM-237] - Refactoring html based on @angular/cdk/drag-drop

61bf50e

[DURACOM-237] - Refactoring html based on @angular/cdk/drag-drop

671fa8f

[DURACOM-237] - Refactoring scss based on @angular/cdk/drag-drop

478783f

[DURACOM-237] - Refactoring html based on @angular/cdk/drag-drop

4b0bf74

[DURACOM-237] - Refactoring ts based on @angular/cdk/drag-drop

6970f1e

[DURACOM-237] - Added imports inside ts component

3907bc1

[DURACOM-234] lint fix

c75c5f1

[DURACOM-234] remove useless import

4bc7df8

atarix83 added 3 commits April 2, 2024 18:51

[DURACOM-234] fix my-dspace.guard

b49d883

[DURACOM-234] Remove assertions on isResponsePending in favour of rem…

660cf7e

…ote data operators

[DURACOM-234] Replace Observable with BehaviorSubject

aba0491

artlowel approved these changes Apr 3, 2024

View reviewed changes

tdonohue mentioned this pull request Apr 3, 2024

Ensures CSRF token is initialized prior to first modifying (non-GET) request #2886

Merged

atarix83 added 2 commits April 3, 2024 18:48

[DURACOM-234] rename resolvers in order to be complaint to function n…

f1686d5

…ame convention

[DURACOM-234] rename guards in order to be complaint to function name…

35714b7

… convention

github-actions bot added the merge conflict label Apr 3, 2024

atarix83 added 2 commits April 4, 2024 09:32

Merge branch 'main' into DURACOM-234

32f1d10

# Conflicts: # src/app/core/data/request.service.ts # src/modules/app/browser-app.config.ts # src/modules/app/server-app.config.ts

[DURACOM-234] Fix merge with main

c327bf7

github-actions bot removed the merge conflict label Apr 4, 2024

tdonohue added high priority and removed work in progress labels Apr 4, 2024

tdonohue approved these changes Apr 4, 2024

View reviewed changes

tdonohue merged commit 7ae6c7e into DSpace:main Apr 4, 2024
12 of 13 checks passed

tdonohue mentioned this pull request Apr 24, 2024

The "custom" theme no longer works #2977

Closed

tdonohue mentioned this pull request Oct 21, 2024

Remove unused dependencies (sortablejs, sanitize-html, webfontloader) #3509

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to angular 16 #2871

Upgrade to angular 16 #2871

atarix83 commented Mar 21, 2024 •

edited

Loading

atarix83 commented Apr 2, 2024

tdonohue commented Apr 2, 2024

artlowel left a comment

tdonohue commented Apr 3, 2024

atarix83 commented Apr 3, 2024

github-actions bot commented Apr 3, 2024

tdonohue commented Apr 3, 2024

atarix83 commented Apr 4, 2024

artlowel commented Apr 4, 2024

tdonohue left a comment

Upgrade to angular 16 #2871

Upgrade to angular 16 #2871

Conversation

atarix83 commented Mar 21, 2024 • edited Loading

References

Description

Instructions for Reviewers

Checklist

atarix83 commented Apr 2, 2024

tdonohue commented Apr 2, 2024

artlowel left a comment

Choose a reason for hiding this comment

tdonohue commented Apr 3, 2024

atarix83 commented Apr 3, 2024

github-actions bot commented Apr 3, 2024

tdonohue commented Apr 3, 2024

atarix83 commented Apr 4, 2024

artlowel commented Apr 4, 2024

tdonohue left a comment

Choose a reason for hiding this comment

atarix83 commented Mar 21, 2024 •

edited

Loading