[ui] Bump Angular version to 12

[kimwnasptd]

/kind feature

Describe the solution you'd like
The other web apps in kubeflow/kubeflow have moved to Angular 12 kubeflow/kubeflow#5525. We should also update this UI which is using Angular 8. This is required to also use the latest common frontend code from kubeflow/kubeflow.

Anything else you would like to add:
The work for this will need to start after kubeflow/kubeflow#6065 is merged which refactors the common code. Without that PR the Katib UI would need to be integrated with ngx-translate which is something we want to avoid kubeflow/kubeflow#6042

After I make this update I'll be able to start working on the next more advanced features like #1440

[kimwnasptd]

/assign @kimwnasptd

[seong7]

Hi @kimwnasptd ,
I think this issue seems to be in progress for a while.
If you need any hand working on this, would you mind assigning it to me?
I might ask you for some helps while working on it, though 😅 .

[kimwnasptd]

Hi @seong7, thanks for the help!

Indeed right now I have limited cycles to work on this. I wanted to postpone this effort until kubeflow/kubeflow#6065 was in, to allow the other web apps to be able to use the common code without having to implement i18n.

I'd be glad to assign this to you and help you through to complete it! Although note that this should not make it in the 0.12 release, since we are already in the feature freeze phase. I'm also working on #1620, to include it in the current release, so at some point you might need to rebase on my changes for closing that issue.

Without further ado here are some good next steps for tackling this issue:

1. Update the code to use the latest commit of the common code https://github.com/kubeflow/katib/blob/master/pkg/new-ui/v1beta1/README.md#serve-only-the-frontend. You'll need to change 24bcb8e to ecb72c2 (latest commit of kubeflow/kubeflow)
2. Follow the instructions in https://update.angular.io/?v=8.2-12.0

I'll do the assignment switch, let's keep this issue for also discussing any difficulties you might bump into
/unassign @kimwnasptd
/assign @seong7

[seong7]

@kimwnasptd
Thank you so much for your detailed instructions !

1. Update the code to use the latest commit of the common code https://github.com/kubeflow/katib/blob/master/pkg/new-ui/v1beta1/README.md#serve-only-the-frontend. You'll need to change 24bcb8e to ecb72c2 (latest commit of kubeflow/kubeflow)

Do you want me to update the README.md?

[kimwnasptd]

Do you want me to update the README.md?

This will need to be part of your final PR, but it's also the first step to start your local development.

The UI is using an Angular library, manually built into a node module, whose code lives in kubeflow/kubeflow. This library is already using Angular 12 so if you'd like to also upgrade the app to use Angular 12 you'll need to use the latest version/commit for this library. Currently the app was using an older commit for the repo/library which was still using Angular 8.

Did my description clear things up a little?

[seong7]

Did my description clear things up a little?

Yes, it definitely did!
Appreciate it :)

[seong7]

@kimwnasptd
This link is the WIP branch of this issue and has an Error that I'm stuck on with kubeflow/kubeflow module as below.

Would you please help on it?

FYI,

• The branch has been done with all updates on the guide and some extra updates of 3rd-party dependencies. (You can trace them by commit history)
• I double-checked that my local kubeflow/kubeflow is watching ecb72c2.
• You can reproduce it by npm run build:prod at /pkg/new-ui/v1beta1/frontend.

[kimwnasptd]

@seong7 thanks for the detailed steps!

You will need to also add "@angular/localize": "^12.2.7", in the package.json which is includes Angular's localization logic.

I tried the code from your branch after this and the UI was built successfully 🎉. With a quick look the main page was working as expected and the form page was showing the following error:

ERROR TypeError: Cannot read properties of undefined (reading 'controls')
    at FormTrialTemplateComponent_Template (trial-template.component.html:93)

But this should be fixed in #1652, so most probably if you rebase on the latest master you won't see this.

And also nice work!