Generate Angular Component In Specific Folder (Quick Guide)

So you're diving into Angular with the Angular CLI...

And you're ready to generate some components.

But wait, you want to organize them neatly in specific folders?

You want a Angular project that is well structured with proper folder structure.

No problem, today I'm going to show you how to generate Angular components in specific sub-folders.

I'll show you how to use the Angular CLI to generate components where ever you want them.

1. Standard Component Creation

Start with the basic component creation command:

ng generate component plainsight

This will generate a component called plainsight inside of the src/app/ directory.

2. Creating Child Components

You want to nest a component inside plainsight?

Easy peasy! Just run:

ng generate component plainsight/child

3. Avoiding Extra Folders

By default, Angular CLI creates a new directory for each component.

If you want to skip that and keep things flat, add the --flat option:

ng generate component plainsight/some-name --flat

4. Using Custom Locations

Want to get even more specific? Specify the custom location directly in the command:

ng generate component your/path/from/the/app/folder/plainsight

5. Bonus Tip: Dry Run

Worried about messing up your project structure? Add --dry-run at the end of the command for a dry run. This shows you where the files would go without actually adding them:

ng generate component path/to/folder/plainsight --dry-run

That's it!

With these commands, you'll be organizing your Angular components like a pro in no time.

Happy coding! 🚀

Daniel Kreider - Angular Dev