{"id":19641840,"url":"https://github.com/layzeedk/ivy-dynamic-rendering","last_synced_at":"2025-06-23T16:31:55.273Z","repository":{"id":38749970,"uuid":"192089097","full_name":"LayZeeDK/ivy-dynamic-rendering","owner":"LayZeeDK","description":"Angular In Depth workshop on dynamic rendering in Ivy.","archived":false,"fork":false,"pushed_at":"2023-01-07T06:24:43.000Z","size":1874,"stargazers_count":12,"open_issues_count":20,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-05T08:35:07.051Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LayZeeDK.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-15T14:39:23.000Z","updated_at":"2023-03-17T12:17:12.000Z","dependencies_parsed_at":"2022-08-25T04:13:20.540Z","dependency_job_id":null,"html_url":"https://github.com/LayZeeDK/ivy-dynamic-rendering","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayZeeDK%2Fivy-dynamic-rendering","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayZeeDK%2Fivy-dynamic-rendering/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayZeeDK%2Fivy-dynamic-rendering/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayZeeDK%2Fivy-dynamic-rendering/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LayZeeDK","download_url":"https://codeload.github.com/LayZeeDK/ivy-dynamic-rendering/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251313655,"owners_count":21569469,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T14:10:36.928Z","updated_at":"2025-04-28T12:31:39.566Z","avatar_url":"https://github.com/LayZeeDK.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular In Depth workshop on dynamic rendering with Ivy\nBuilt using these commands\n\n```\nng new ivy-dynamic-rendering --enable-ivy=true --minimal=true --inline-style=true --inline-template=true --routing=false --style=css --skip-tests\ncd ivy-dynamic-rendering\nng update @angular/core --next\n```\n\n## Lazy-loading plugin components and Angular modules in View Engine\n\n[eval() + Compiler](https://github.com/kirjs/angular-dynamic-module-loading/blob/master/src/app/app.component.ts)\n\n[SystemJS.import() + Compiler](https://stackoverflow.com/a/50395048/1071200)\n\n[modules.json + SystemJS.import() + Compiler](https://github.com/lmeijdam/angular-umd-dynamic-example)\n\n[SystemJS with AOT-compiled modules (no Compiler)](https://stackoverflow.com/a/45506470/1071200)\n\n[\u003cscript type=\"module\"\u003e + dynamic import() with fallback to SystemJS.import()](https://medium.com/@camille_hdl/dynamic-import-of-es6-modules-with-fallback-to-systemjs-c72b30b8225e)\n\n[Here is what you need to know about dynamic components in Angular by Max Koretskyi](https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e)\n\n[It's Alive! Dynamic components in Angular by Shmula Jacobs](https://youtu.be/q2Exs-82tkw)\n\n## Lazy-loading plugin components in Ivy\nDynamic `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.\n\nTo 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 `\u003cscript type=\"module\"\u003e` loader.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flayzeedk%2Fivy-dynamic-rendering","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flayzeedk%2Fivy-dynamic-rendering","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flayzeedk%2Fivy-dynamic-rendering/lists"}