Angular lazy loaded module components with the same name

Question

I have an Agular app with several lazy-loaded modules. These modules each contain some different components which are logically similar but differ in content. Eg each module may have its own "home" component.

Is it okay to name these components exactly the same?

To me, it seems overly verbose to prefix each with the module name. Especially when the names start to get long, and considering I would like to maintain the balance between concision and readability.

Functionally this doesn't appear to be a problem. Take the following app as an example. It has 2 lazy loaded modules each containing 2 components with the same name as the components in the other module. One component is loaded by the module's route and the other is loaded via its selector in the template of the first component.

https://stackblitz.com/edit/angular-comp-name-test

I understand that this question may be considered as opinion-based but are there any technical reasons why this shouldn't be done? (I am also interested in opinions if someone wants to dm me)

Answer 1

Technically there is no issue, you can use the same name. Like I have many modules having dashboard as each respective module's component. As long as you properly import it, its fine.

But for larger apps sometimes when auto importing it can import pointing to different 1 then the one required. This happened with me once, I had add and list component in 2 different so while auto importing the url was pointing to the wrong one.

So for just the sake of clarity its nice if you keep different name like prefixing it with something so you know it is for this module etc otherwise we can't say it is or is not "good or bad practice".

Answer 2

Hey you can use import aliases in the tsconfig.json paths

"paths": {
    "@modules": "app/test-mod(?:\.\d+)?"
},

You can use regex to match the file end names so that if you have more than one folder you can just name them like file1, file2, file3 and son on the match them in the import using

import('@modules/innerfolder/mymodule.ts')

Answer 3

I have been working on a project with 5 lazy loaded modules having millions of components in their sub folder with same components names.

The good reason or the problem faced by me in while in the development only is while importing the components the auto import does some time imports component from different module and that way I have been facing confusion and getting development done some time with wrong components.

But this has happened 2 times after then I was very safe while importing components

Answer 4

So for me this is hell. i work in a larger project and there are some "FormName"-Klasses. While importing them, Code cuts off the namespace which makes it horrible for me to import the right one. Therefore i plead this to become "Bad practice"