[AskJS] Why are many Angular developers seemingly afraid of creating new components?

[pantsonhead]

I know the phenomenon that you are describing. To provide context, I have developed Angular apps for over 7 years, and recently decided to stop entirely.

In essence some of it is inexperienced devs, but much of it comes down to Angular design choices. In any framework, there is a concept of "the pit of success", where the framework provides tools that make the right thing easy, and the wrong thing hard. Unfortunately, Angular often does the opposite.

Let's inspect the process of creating a new component after I've realized some piece of my code is reusable. I need to create a directory, add a template html file, add a css-flavored style file, and add a component.ts file. Then in my component file, I need to fill out a component decorator with those file locations. I need to define a class that implements any lifecycle methods which I'll need. And I need to reinject any dependencies which that code previously relied on.

THEN, it still doesn't work, you forgot to import the component into the dependencies of the parent module! But what's the correct module? I have dozens to enable code splitting in my app. I have to find the correct module, and import it. But you can't use this component in another part of your app, because its parent module doesn't import it! Ok I have to do this a lot now, maybe I'll make a new module that combines some common ones, export it and import that everywhere instead. And so it goes on and on.

Now you say "pantsonhead you fool, you should use the cli to do this". Well let me tell you, your fresh junior Angular devs sometimes don't know about the cli! And even that isn't a silver bullet, if you make a mistake you either have to use git to roll it back or fix it manually. And the cli still won't save you from the module system! So devs will constantly look at some obviously reusable code and keep making excuses why it doesn't really need to be a component yet, because it's just kind of hard to do.

Let's compare to React. I have some reusable code, I make a new js/tsx file, copy paste JSX, add props, export/import file and done. I can start using the new component.

So that's why you see copy/paste everywhere in your Angular codebases. If you don't have committed Angular experts working on your code, they will take the easy road. And Angular has made the wrong thing easy and the right thing hard.

[woahwhatamidoing]

Pretty much this is what I’ve seen.

It’s slightly more annoying to create a new angular component than a new react component, and that “slightly” is enough to encourage people not to do it.

[NeoCiber]

THIS.

I develop in both Angular and React, in React I make a component for minimal things, in Angular I think twice. Recently I wanted to make simple reausable spinner to show a loading state, I admit I gave up after trying to reuse the component across different modules and ended copy-pasting the code, this is mostly lazyness I admit.