2

I'm currently using Angular (v4) to build a web app which is essentially a portfolio of work. Each entry into the portfolio will most likely require its own component. Here lies the issue, the number of entries in the portfolio can range into the hundreds and I don't want to add a component to the module every time a new component is created. A search revealed the following possibilities to address my issue:

I've had a look at lazy loading of modules:

Even dynamic loading of components:

Even this stack overflow question

All these solutions require the components to be present in the module.

I did however manage to find this plunker, which loads components based on a component name and path to the component as strings. This unfortunately, is based on a very young version of angular 2.

Ideally, it would be good to extract parameters from the URL which can then be used the load the required component and it's associated class. Would this be the best option? Similar to the solution is the above plunker but updated to angular 4?

Community
  • 1
  • 1
Harpal
  • 12,057
  • 18
  • 61
  • 74
  • If I understand your need correctly, it sounds like every portfolio could (and should) be a separate module. Then you lazy load the modules as needed, like you said. What seems to be the issue with this approach? – Fredrik Lundin Apr 25 '17 at 12:51
  • Does this not seem to be overkill? Would the router not require it's own entry for each module as well? – Harpal Apr 25 '17 at 13:12
  • I think I misunderstood your scenario a bit. I'm having some trouble understanding what your portfolio consists of. I initially thought it was hundreds of components per portfolio, but I see now that I read it wrong. Could you elaborate a bit on your plan? – Fredrik Lundin Apr 25 '17 at 13:39
  • I would like to almost lazy load components so I don't have to list them in their respective modules. This would prevent a long list of imports for each module. The best option for me would be to get a parameter from the url e.g. `/portfolio/data-science-tools` the last part of the url (`data-science-tools`) would be a parameter in the router which i could extract. Given that parameter I would like to load the component `data-science-tools.component.ts`. The component is then displayed to the user. I would like to do this without having to include the component in the module – Harpal Apr 25 '17 at 14:54

1 Answers1

0

As far as I understand, as the different entries in your portfolio will have to be Components, you are required to add them to a module.

You have a couple of different ways to approach this though. Two main options, as I see it, would be:

1. Create routes for every component

This would still require you to register all of your components in your modules imports array

2. Make use of Dynamic Component Loading

This methods lets you dynamically load components into your template at run time. It's a bit more work to setup, but shouldn't be a big thing to do. The official documentation has a great guide on it. Keep in mind that the components still have to be registered into your modules entry components array though - so you are not getting away from that.

To cleanup your main module, - since you are concerned with having so many imported components in your main module - you can extract the component imports into a separate module and import that module into your main one again. This will not lead to lesser imports in total, but will lead to a cleaner module structure.

Fredrik Lundin
  • 8,006
  • 1
  • 29
  • 35