I have created two components in my Angular Project based on the requirement. I need to show these components under a specific folder so that I can relate it easily while working on another modules.Please let me know if there is any command which can fulfill my requirement.

Components are : user-list and user-single Folder Name: Users

I have created two components in my Angular Project based on the requirement. I need to show these components under a specific folder so that I can relate it easily while working on another modules.Please let me know if there is any command which can fulfill my requirement.

Components are : user-list and user-single Folder Name: Users

• javascript
• angular

• 3 There isn't a command for this. If they're newly created, just delete them and generate them again with the appropriate path. – jonrsharpe Commented Nov 15, 2018 at 8:35
• Thanks. I was supposed to do everything with command line that's why asked If any command exist which will work on this scenario. – Muskan Commented Nov 15, 2018 at 8:41
• Via commandline, you can move the file/folder. In Linux, you use the “Mv” command - not Angular Cli command though – salah-1 Commented Nov 15, 2018 at 8:54
• This can be done using VS Code with new versions of Typescript, not sure about other editors. There is a discussion here – sabithpocker Commented Jun 30, 2020 at 8:26

6 Answers 6

If you're using VSCode, you can move the folder from within Code's Explorer and it is usually smart enough to update the file imports.

These are just some files inside a folder. In windows, you can use the move command to move them to the appropriate directory. Or you can just delete the component, and generate a new one in your required directory. Either way works!

I don't know for sure if there is a way to do this using the terminal (probably it exists).

But in VS code, you can simply rename the component to include the folder you want to use as a container and everything will be updated automatically.

Let's say you have some like:

And you want to move the component named 'single-value-card' to the 'visualization' folder. Then all you have to do is to rename the component folder as shown:

And voilá:

Note: After renaming, VS Code will ask you if you want to apply the reference refactor. As I've answered 'Always apply the reference update' (or smth like that) it never asked me again

I just figured out that moving a component into another folder (eg components) within VS Code will course a real strange compilation problem. Moving that component back where it was does not solve the problem :-/

move your component folder to another folder and go to the app.module.ts and redefine the new location

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { ToolbarComponent } from './toolbar/toolbar.component';
import { ContentComponent } from './content/content.component';
import { FooterComponent } from './content/footer/footer.component';

Try renaming your file with "components/", that should move it into your components folder and automatically update the file imports too.