/ivy-dynamic-rendering

Angular In Depth workshop on dynamic rendering in Ivy.

Primary LanguageTypeScript

Angular In Depth workshop on dynamic rendering with Ivy

Built using these commands

ng new ivy-dynamic-rendering --enable-ivy=true --minimal=true --inline-style=true --inline-template=true --routing=false --style=css --skip-tests
cd ivy-dynamic-rendering
ng update @angular/core --next

Lazy-loading plugin components and Angular modules in View Engine

eval() + Compiler

SystemJS.import() + Compiler

modules.json + SystemJS.import() + Compiler

SystemJS with AOT-compiled modules (no Compiler)

<script type="module"> + dynamic import() with fallback to SystemJS.import()

Here is what you need to know about dynamic components in Angular by Max Koretskyi

It's Alive! Dynamic components in Angular by Shmula Jacobs

Lazy-loading plugin components in Ivy

Dynamic import() statements are transpiled to promises by WebPack and need to be statically analyzable. This means that we don't get runtime dynamic imports. The experimental solution in this repository works with the Webpack development server supplied by Angular CLI, but doesn't work in production when you need runtime dynamic plugins such as loading a configuration from the a server or dynamic loading based on user input.

To do this, we would need to combine the experimental Ivy APIs with one of the solutions from the above resources. For example SystemJS.import or a <script type="module"> loader.