Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Create dynamic component loading documentation

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Reactions:15
Comments:10 (3 by maintainers)

Top GitHub Comments

6reactions

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.

4reactions

darkguy2008commented, 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.

Top Results From Across the Web

Dynamic component loader

To add the component to the template, you call createComponent() on ViewContainerRef . The createComponent() method returns a reference to the loaded component....

Loading Components Dynamically in an Angular App

A tutorial that shows how to create an Angular app with dynamic component loading.

Angular Dynamic Component Loading with jQWidgets

The following example shows how to build a Grid with Dynamic components loaded into the Grid cells. app.module.ts import { NgModule } from...

Dynamically Loading Components with Angular CLI

To aid in the consumption of dynamic components, we will create a simple manifest interface which resembles the Route interface in @angular/router ....

Angular - Dynamic Component Loader

Those components which need to be loaded dynamically must also be configured in entryComponents metadata of @NgModule decorator in the module file. To...