Not so long ago I began to study angular 7. I had not written on it before. Now I have a number of questions that it is important for me to know before I continue to go further.

First question: I am going to create two applications (mobile and for PC). These applications will be similar to each other, except that they will have different styles and HTML markup. What is the best way to solve this problem without copying the components?

Second question: I have an application that uses many components, services, etc., and I would like to use these components (services ...) in another application, but I don’t want to just clone these components (because other applications maybe a lot). I want to be able to connect the necessary components to other projects that are generated using the ng generate application command, with the possibility of replacing css files. How is this possible? In the future, one or another component may be rewritten, and I just want to make changes in one place.

I will be very happy if you give me a foam in the right direction, where I could find answers to my questions. Any help would be appreciated.

    1 answer 1

    The question is very complicated, since every year the complexity of the applications keeps growing, and the best practices for designing the structure of projects have not yet been derived. This is due to the fact that for small projects the topic is irrelevant, and the large component, in complete immersion, prevents the carrying. Moreover, this problem is not only angular , but a problem of the modern frontend as a whole.

    At the moment there is only one direction that leads to the solution -

    1. create styles for components using css variables and shadow-dom, with which you can set them to a higher level.
    2. stored in private or local npm repositories.
    3. enjoy the storybook .

    Besides, when designing complex projects, do not forget about the possibility introduced in TypeScript with version 3.0 , such as links to projects .

    • There are several questions: 1. How to set variable values ​​for encapsulated styles in Shadow DOM , besides, why does this bike support if angular supports Shadow DOM out of the box for each isolated component? 2. What exactly are you going to do as angular.module ? What does storybook help in this case? - overthesanity pm
    • 1. I described the usual way to interact with shadow dow. 2. ui components and services. 3. facilitate the development and operation of ui. - user220409
    • angular.module is directly related to angular 1 :( - overthesanity
    • one
      they will not understand, because they are different concepts, besides, in the new angular ivy compiler, modules are not used at all, so I ask the question - how will the “design of ui components and services as angular.module ” angular.module ? - overthesanity
    • one
      @OlmerDare, yes, but the component architecture is very hard to protect from the effects of changes. The principle of sole responsibility in SOLID manifests itself in two different forms. In a pure component architecture, it turns into a CRP (common closure principle, which is rather difficult to maintain with large teams 😞), and at the level of a full-fledged modular architecture - into the principle of the axis of change that allows you to create architectural boundaries. - overthesanity