Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create dynamic component loading documentation #39624

Open
alan-agius4 opened this issue Nov 10, 2020 · 9 comments
Open

Create dynamic component loading documentation #39624

alan-agius4 opened this issue Nov 10, 2020 · 9 comments

Comments

@alan-agius4
Copy link
Contributor

@alan-agius4 alan-agius4 commented Nov 10, 2020

📚 Docs or angular.io bug report

Description

Following the discussions held yesterday during the tooling meeting we should create a documentation explaining how to load a dynamic component.

This document should also make it clear which scenarios are supported and not. In many cases currently, users are currently using a mixture of AOT and JIT to dynamically load a component. This doesn't work with any build optimizations (ie: terser and build optimizer), among other things due to the ngJitMode: false guards.

Using AOT/JIT interop with build optimizations is currently not supported as the main use cases for this appears to be unit testing scenarios, that is until the Dynamic view composition project which is currently listed on ng-elephant is finalized.

Users who are concerned about performance, security and bundle sizes shouldn't use AOT+JIT interop. Compile components at runtime is a cross-site scripting (XSS) vulnerability in itself and shouldn't be used for production.

Related issues

angular/angular-cli#19016
angular/angular-cli#19321
#36255
#37216
#15510

@gmaggiodev
Copy link

@gmaggiodev gmaggiodev commented Nov 10, 2020

@alan-agius4, Dynamic view composition is a base feature for our application framework (built on top of angular) and we are in trouble for the reasons you explained here. Can you give me a look on what you called "Dynamic view composition project"?

@alan-agius4
Copy link
Contributor Author

@alan-agius4 alan-agius4 commented Nov 10, 2020

@gmaggiodev, dynamic view composition is still at design phase.

@alan-agius4 alan-agius4 changed the title [docs] Dynamic Component Loading Create dynamic component loading documentation Nov 10, 2020
@pcatuna
Copy link

@pcatuna pcatuna commented Dec 3, 2020

@alan-agius4 Could you please give us an estimation for when this will be done ? And Is there any workaround at the moment for Angular 9/10 for AOT + JIT or is there a proper way to implement such a thing ? Or as is there an estimation for the 'Dynamic view composition project' ? I am facing mostly the same problems as @gmaggiodev said.

@hydra1983
Copy link

@hydra1983 hydra1983 commented Mar 26, 2021

@pcatuna you may have a look at this Uncaught (in promise): Error: Angular JIT compilation failed: '@angular/compiler' not loaded! in angular 9

I think exclude of TerserPlugin may help to decrease the generated size after side_effects set to false.

@angular-robot
Copy link

@angular-robot angular-robot bot commented Jun 4, 2021

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

@bh3605
Copy link

@bh3605 bh3605 commented Jun 16, 2021

I'm more curious about your reference to ng-elephant. What is that?

@angular-robot
Copy link

@angular-robot angular-robot bot commented Jun 24, 2021

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

@darkguy2008
Copy link

@darkguy2008 darkguy2008 commented Jul 2, 2021

This is something that should be addressed by the full team and not discarded because it doesn't have enough votes. This is not a trivial feature that users are asking for, this basically makes Ionic Angular-based apps unable to be built if we use dynamic components for alerts, for instance ( see https://github.com/jgerstle/ionic-custom-alert ).

What workaround is the Angular team proposing other than just leaving us with our hands tied "until it's done" ? Quite a bad design decision made with no workaround provided, other than disabling all optimizations. I just spent all day trying to work around this and it's been impossible, so I've had to revert back my app to Angular 11 and use enableIvy=false.

@NoelDeMartin
Copy link

@NoelDeMartin NoelDeMartin commented Oct 4, 2021

In case you want more use-cases, we also need it for our mobile app at Moodle: https://github.com/moodlehq/moodleapp

We need to render dynamic templates because Moodle sites can be extended with plugins, and templates will come from the server.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants