Posted under Angular & Routing & Web
Permalink
Tags Tutorial
Following on from my previous post on dynamic routing fundamentals, the ability to route dynamically across angular elements, i.e. to use the router to route to a dynamically loaded angular element, seems to be a sticking point.
Previously, I developed a web components example where a ‘fabric’ component was responsible for dynamically creating web components and displaying them. This did not use angular routing, but dynamically added them to the dom based on menu selections or url parameters. Subsequently, I wanted to investigate whether I could use angular routing to implement this instead.
I have found a number of examples of varying degrees of complexity, which go at least some of the way. However, I have not seen what I would term a reasonably straightforward, out-of-the-box solution, which does not involve too much deep diving into the internals of angular.
The following examples have been examined to date:
A complex dynamic one here with perhaps useful ideas but actual components still appear to be declared in the angular app:
https://medium.com/ngconf/dynamic-component-generation-in-lazy-loaded-routes-d2e0f9e89c57
The code is here:
https://github.com/theAlgorithmist/Angular8LazyLoadDynamic
Some specific ideas in this one here but still some way to go IMO…
https://medium.com/@timon.grassl/how-to-use-routing-in-angular-web-components-c6a76449cdb
This one perhaps looks the most promising, and may have all the relevant techniques needed, but It still appears to have statically declared component objects which are used dynamically in a dynamic order…
https://snyk.io/advisor/npm-package/angular-elements-router
Some more research is needed on this as I am keen to fine the simplest solution which uses as little as possible of the deeper features of angular.
Comments Off on Angular – Dynamic Routing between Angular Elements aka Web Components