0

Maybe I do not understand something, but I'm guys in a stupor. Now the customer has come up with a task. Allegedly the user interface should be easy to configure, that is, the structure comes from the server:

1st option 

{
            "rows": [
                {"l12" : "slider-component"},
                {"l6" : "process-component"},
                {"l6" : "order-component"},
                {"l12": "footer-component"}
            ]
};

2st option (the analyst can change it and get)

{
            "rows": [
                {"l12" : "slider-component"},
                {"l6" : "search-component"},
                {"l12": "footer-component"}
            ]
};

That is, at any time from the server comes information about the name of the component, which should be displayed in the UI. And Angular himself has to figure it out. But I can not understand, in the current version of the framework there are a lot of opportunities to create components on the fly, but everywhere we have to declare in AppModule all the components that will be compiled.

But this is stupid! At me for example, 300 components are written, the analyst in base specified components which should be deduced in UI, for example 5, and me that, to import all 300 components?

I thought that everything was really simple with JS, so the server sent us a structure, and Angular already sees the names of the components from the structure and loads the necessary * -component.js file asynchronously with its implementation, template and so on. Or I do not understand something, and I can not understand where this * -component.js will come from, if it needs to be compiled in advance via webpack (translating from typescript to javascript).

Help please, how can I realize the task assigned to me !?

splincode
  • 67
  • 2
  • 10
  • http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 shows an example – Günter Zöchbauer May 15 '17 at 10:47
  • https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html – splincode May 15 '17 at 10:51
  • I tried to run their example in the documentation, but it does not work, errors in the logs, you need to write to the guys on Google – splincode May 15 '17 at 10:52
  • "it does not work" is quite vague. The Plunker in my answer in the linked question doesn't produce an error for me. – Günter Zöchbauer May 15 '17 at 10:54
  • But this is not exactly what I need. In this way, I could not have resorted to creating components if I were limited to a set of C1, C2, C3. In your example, you must pre-specify the components that will be displayed in the tabs. I, for example, do not know what will come from the server, whether it's C1 or C2 or Z2, I have the same 300 components, how can I understand which component will be incoming, as in the example you write entryComponent – splincode May 15 '17 at 10:58
  • Sorry, I mixed the links. Here is a link to the documentation, where their example produces an error and is not rendered. Https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html – splincode May 15 '17 at 11:00
  • 1
    Please create an issue in https://github.com/angular/angular/issues – Günter Zöchbauer May 15 '17 at 11:22
  • And yet I can not understand if I have information coming from the server that I have to add 5 components, and all I have 300 of them. Do I have to specify all 300 components? – splincode May 15 '17 at 11:58
  • Not sure what you mean with "specify all 300 components". Are these 300 different components or 300 instances of one or few different component types? – Günter Zöchbauer May 15 '17 at 11:59
  • I have 300 components (not instances), but on a page I gonna use only some of them. Is there a way to load necessary ones on demand? – splincode May 15 '17 at 12:08
  • I don't think so. You need to register them statically. You can move them to lazy loaded modules and then load the modules that contain the components on demand. One module per component is probably overkill. You might be able to group them together to modules in meaningful way or otherwise just create one module that contains them all. – Günter Zöchbauer May 15 '17 at 12:09
  • Are there any examples of using this approach, how to load modules with components on demand? Just in my project, I created several modules (HomeModule, SearhModule, ..), but they are all loaded the first time the page loads. It turns out 300 modules will be loaded right away when I first download the page from me, if I collect it with webpack? – splincode May 15 '17 at 12:18
  • There are questions with answers about dynamically loading modules without using the router. I never tried it myself and don't know details. – Günter Zöchbauer May 15 '17 at 12:21
  • So what should I do? In which direction to move? – splincode May 15 '17 at 12:31
  • Read about webpack code splitting and investigate how you can use angular compiler to dynamically load module – yurzui May 15 '17 at 12:37
  • http://stackoverflow.com/questions/40293240/how-to-manually-lazy-load-a-module is an example. – Günter Zöchbauer May 15 '17 at 12:40
  • you mean about https://blog.waffle.io/code-splitting-in-angular-2-with-webpack-2-ce8dd4b8b23e – splincode May 15 '17 at 12:45
  • Yes, something like that. `System.import(import in future)` or `require.ensure` – yurzui May 15 '17 at 12:48
  • But after all, webpack and so generates require.ensure, and I use routing in the project, but it is loaded at the moment of page start, and all the logic for some reason is glued together in main.js – splincode May 15 '17 at 12:55
  • https://github.com/splincode/codework/blob/master/typescript/angular/dynamic.ts – splincode May 16 '17 at 08:14
  • I made an example for Angular 4, but in this case, you still have to specify in advance the input set of components – splincode May 16 '17 at 08:15

0 Answers0