7

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

enter image description here

Muskan
  • 121
  • 2
  • 2
  • 9
  • 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 Nov 15 '18 at 08: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 Nov 15 '18 at 08:41
  • Via commandline, you can move the file/folder. In Linux, you use the “Mv” command - not Angular Cli command though – salah-1 Nov 15 '18 at 08:54
  • This can be done using VS Code with new versions of Typescript, not sure about other editors. There is a discussion [here](https://stackoverflow.com/questions/43542247/can-vs-code-automatically-update-javascript-and-typescript-import-paths-on-file) – sabithpocker Jun 30 '20 at 08:26

5 Answers5

2

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!

Nikhil Sridhar
  • 78
  • 5
  • 2
    You will need to update a few imports once you move the components. Start with `app.module.ts` then you will need to find the rest. Running `ng serve` will tell you where the incorrect imports are. – Nathan Clement Aug 09 '19 at 15:46
2

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.

eqprog
  • 76
  • 4
1

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:

enter image description here

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:

enter image description here

And voilá:

enter image description here

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

Guillermo Gerard
  • 808
  • 10
  • 21
0

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 :-/

Zonk
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 08 '22 at 18:12
0

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';
Shehan Hasintha
  • 947
  • 10
  • 10