[ZEPPELIN-6076] Fix rendering runtime dynamic components in new UI #4809
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What is this PR for?
The current issue is that the new UI fails to render dynamically created components at runtime, which causes the
%sh.terminal
interpreter to malfunction.This problem occurs because Angular's AOT compiler removes decorators during the build process.(related issue)
As far as I know, Angular does not support JIT compilation alongside the AOT compiler.
However, we need to render runtime dynamic components for compatibility reasons.
By Importing and re-exporting Angular core decorators, we can prevent the AOT compiler from removing them.
(angular/angular-cli#9306 (comment))
I believe there are two possible solutions: either implementing this fix or turning off AOT compilation.
However, giving up the performance benefits of AOT compilation is not ideal, So I chose this approach.
What type of PR is it?
Bug Fix
Todos
What is the Jira issue?
How should this be tested?
%sh.terminal
interpreter and see if it renders well.Note: Since Angular dev servers do not use AOT compilation, testing in development mode will not reproduce the issue.
Screenshots (if appropriate)
Before
After
- The connection status message appears broken due to incompatibility between Angular and AngularJS syntax, but this does not affect functionality. (This can be addressed in a separate issue.)Questions: