[ui] Bump Angular version to 12

/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]

@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 https://github.com/kubeflow/katib/pull/1652, so most probably if you rebase on the latest master you won’t see this.

And also nice work!

[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.