I've been around the block, from Vue to React the Svelte and a long time ago, Angular. I have grown to love single file components and the productivity that brings, remembering that all the dogma, that's just for us the developers, so why not make the most efficient path.

So here are my tips to go from the above back to angular and not feel quite so itchy.

Learn from the best:

In Svelte, the default project structure is flat, pretty much, you put your components in the src folder, I have always liked more how Vue does it with a components folder and the app root being the root of src:

Now I once listened to a video that explained Angular teams idea of all components files in their related folders including tests.

I cant shake that test need to be away from src, I also dont like navigating between lots of files its quite disruptive, Single file components are immersive.

So this is my setup:

...
"schematics": {
        "@schematics/angular:component": {
          "inlineStyle": true,
          "inlineTemplate": true,
          "skipTests": true,
          "path": "src/app/components",
          "flat": true
        }
      },

My feelings

Much as I say that one is not better than another and it depends, I do have my personal preferences.

I lean havily away from complexity and magic and more towards simplicity, Svelte really really scratches that itch. Angular not so much, but I understand why its used, standards are indeed productive... probably, have I got any analytics on how fast it is to develop one over another, no not really.
Vue by the way is probably smack bang in the middle, I have enjoyed it.

I don't talk about React, its not bad, but I think Stencil does JSX better.

Final thoughts

Now for those unaware, most solutions these days support TypeScript - this means one less criteria to judge Angular against, we can look at it at OOP slightly overly complex compared to others.

Many thanks :)