Angular-cli: Rename / remove / move components

[zpydee]

Please provide us with the following information:

1. OS? Mac OSX (El Capitan)
2. Versions. Please run ng --version. If there's nothing outputted, please
   angular-cli: 1.0.0-beta.1
   node: 5.7.0
   os: darwin x64

It would be really usefull to add cli commands for:

• rm = removing a component
• mv = moving / renaming a component

Unless I am missing it, I don't see that this exists and it would be really useful during refactoring to avoid all the manual updates that come with this process.

Thoughts?

[sWW26]

ember-cli has ember destroy for removing items.

And there's an afterUninstall hook that can be used to remove barrel registration.

[filipesilva]

ember-cli indeed does have those commands, but they currently are not working correctly with the blueprints.

[kylecordes]

Here's a bit of further feedback. The current way that CLI creates new components and other pieces has the merit of following the nascent style guide. So perhaps this feedback is really for the style guide. It certainly creates quite a lot of duplication and naming. For everything that we add using this tooling, we get N copies of its name across multiple directories and files, with two different variations of the name. When the time comes to rename (which happens quite often in real applications), this adds lots of friction. I suppose there is nothing to be done about it; the decision has already been made that the official style will be to use two different variations of every name (or more) and to spray them across many files. But there certainly is an opportunity for the CLI to ease the trouble that this decision creates.

[filipesilva]

Somewhat related issue: https://github.com/angular/angular-cli/issues/357

@kylecordes overall refactoring of typescript projects is quite well supported across different IDEs via typescript services. Refactoring a name should operate correctly across the project, and disregarding other variables with the same name.

I'm also not too clear what you mean by "N copies of its name" and "two different variations of every name", but you are right that those are style guide decisions and not CLI decisions - the CLI merely implements the style guide to the best of it's ability.

[pramttl]

Renaming a component would be very useful to have CLI feature. I was expecting this feature to be there and saw the CLI help and was disappointed because it wasn't.

I have to rename atleast 5-6 files (*.component.ts, *.scss, *spec.ts, *.service.ts, etc) and then update those files where the component was imported or used. (e.g. app.routes.ts and other files). A quick CLI command for this would be a big timesaver.

[heysushil]

I didn't get the solution for - how to remove component by angular-cli . I was tried my examples but still get nothing ! rm and mv didn't worked ?

[leehericks]

A ng destroy would be a good opposite of ng generate as the readme introduces generate like ng generate component my-new-component which creates MyNewComponentComponent.

[solanoepalacio]

I as well believe a ng destroy would be quite usefull

[Gastalver]

+1 to ng destroy or ng remove

[hsw107]

Just ran into this where I had created a component, imported packages that had the same named components and I was left having to tediously update all the files connected to my previously generated component. A rename would be a godsend.

[asifbherani]

How do we distroy component as when I try to use ng d c or ng r c it throws the following error: The destroy command is not supported by Angular CLI.

[josephjimmy]

It will be very useful if we get commands for remove/rename components.

[sorcamarian]

As a temporary solution, if you have a clean repository and you want to remove, you can use: git reset -options

https://git-scm.com/docs/git-reset
http://stackoverflow.com/questions/9529078/how-do-i-use-git-reset-hard-head-to-revert-to-a-previous-commit

[saad749]

+1 to have this feature in the CLI

[LuisJoseSanchez]

Remove option is a must.

[sharikovvladislav]

+1 to have this!

[alenn88]

+1 Strongly suggest to add ng remove r or ng destroy d component/service/pipe and etc.

[guzcon]

+1 for this

[leehericks]

I can't believe this has been open so long. If you have code to generate, certainly you can delete those same file locations. Manually removing a botched naming of a generated component is a pain.

[tytskyi]

People that demanding on the feature - you don't realize how complicated it would be to implement. Even advanced IDEs do mistakes when moving components to other folders. Path become rewritten mistakenly broken. Or when doing delete - IDE found too much dependent relation which it cannot handle automatically - so it asks developer to review. Expecting this feature from cli is very optimistic.

Theoretically it would be easier if let's say absolutely prohibit developers to manually edit imports/exports. But who wants frozen file system in their project? And who will really keep this rule in 100% of cases?

[leehericks]

Fair enough. I dont pretend to know how complicated Angular setup is. But Rails has had this since its inception so I imagine there must be a solution. Isn't the most common use case of using destroy right after generate?

I'm not a proponent of rename as much as I am basic destroy functionality.

[sharikovvladislav]

Isn't the most common use case of using destroy right after generate?

Exactly. I assume that this use case is much easier then 'create component, use if for 2 years, destroy component'.

[shockw4ver]

+infinity! It would be a great improvement to add this feature!

[arielalvarez88]

+1

[dgroh]

+1

[davidbruce]

+1

[M-sala]

+1

Just noticed that I have to rename 4 components along with html and css files and it's already cumbersome...

[davideberlein]

+1 renaming a folder + 4 files is a hassle even though WebStorm keeps the references all in sync

[rageshvr]

+1 for renaming and deleting 😄

[amit0001]

+1

[peterleejscript]

+1

[polyglotinc]

+1 for renaming and deleting; its like having mkdir without rmdir and mv! There should be CRUD for each entity type, not just Create
BTW, I dont think a priority of "nice to have" is correct...this is missing basic functionality for such a fundamental tool.

[haydenhancock]

+1. ng destroy would be excellent.

[sinedsem]

+1 for renaming

[AndrinGautschi]

+1 for crud operations

[penniath]

+1 for renaming components.

[Padimanskas]

+1 for renaming and removing components

[horacehylee]

+1 for renaming and removing components

[rohyadav]

+1 for renaming and removing components

[anilkumar-adhikari]

+1 for renaming and removing component

[luisandia]

+1 for renaming and removing component

[khalidriaz]

+1 for renaming and removing component

[mjunior]

+1 for renaming

[rlingineni]

+1 for renaming and removing ... Even if a Rename meant to delete and recreate, I'm down. I usually generate a new component, and copy the old code over.

[wcpmahmudul]

1+ renaming and removing. Any document of proper way for renaming and removing for now?

[abhijeet2083]

+1 for renaming

[yorgsite]

I'm so in need of this feature that i made my own (Pending the official version).

It's far from perfect and assumes that "app.module.ts"'s shape have not been too much messed up manually (that's why it's not in a repo), but it helps.

angular-4-custom-cli.zip
unzip a the root of your project (same folder where you use ng ... ).

How to use:

remove:
node remove_component OldNameComponent

rename:
node rename_component OldNameComponent NewNameComponent

[mnlfischer]

+1

[BenRacicot]

Wow if I didn't have to rename components after refactoring that would be so awesome. +1

[mlamothe]

+1

[leehericks]

I’m going to mute this because I’m tired of getting +1 emails. I raised this issue a long time ago but I don’t think it’s a priority to the core team.

[httpJunkie]

+2

I would like to see ng destroy component myComponent and ng rename component myComponent newComponentName

[Programazing]

+1

I'd love to be able to quickly rename or remove a module using angular-cli.

[mbougarne]

It will be much more easier and handy to use CLI for R/M/D components and services

[jmdmao]

+1

[danelse]

+1

[mairouche]

+1

[CesarDevesa]

+1 and unsubscribe!

[oliveirabc]

+1

[jkatnik]

+1

[suslovsergey]

+1

[totalknowledge]

Yes please :)

[danielszuk]

+1

[rmlzy]

+10086 for renaming

[kazaaaak]

+1

[activecodedev]

+1

[Raveesh]

+1 . I actually need the renaming part as I have just developed my first angular app and I felt the need to refactor it and my IDE was not kind enough to allow me to do that .

[hemanthNaga]

+1 It would be a nice feature in angular CLI to have a command for removing/renaming components or modules or pipes etc.,

[ryall]

One solution, although breaks the Angular convention, is to rename the files in each component directory to index.ts, template.html and style.css. That way you can rename just the folder and for imports you can simply import { SomeComponent } from './path/to/dir';.

It's not ideal though, and I would also prefer renaming support. Just the file names is fine, the refactoring can be done in the IDE and is probably out of scope of the CLI anyway.

[Costas-Zeimpekis]

I also agree, in having a "ng destroy" or "ng remove", when we want to delete a component, so we do not need to delete the file and then also manualy modify the app.module.ts

[rechenberger]

Hi guys! ✌️

We just wrote a tool to rename angular components.
Check it out https://www.npmjs.com/package/ng-rn

Hope you like it 🙃

[gitlines]

We just wrote a tool to rename angular components.
Check it out https://www.npmjs.com/package/ng-rn

Looks I just had this itching my mind at the right time. Thx!

[gioragutt]

Any plan to support this in the future? Combining schematics and ngc can be really powerful here..

[kartikgola-compro]

+1 for moving
Something like -
ng move <component_name> <new_location>
or
ng move <old_component_path> <new_component_path>

[anafreitas]

+1

[thegrims]

@filipesilva Could I develop this feature and submit a pull request, or is it already under development by someone else?

[zion99674]

why on earth will i creat a component and not be able to delete... absurd

[yglin]

+1 for ng mv(renaming component), happened to me many times.
I always kick off a component with a stupid name, naming is really an art...

[ciesielskico]

Moving can be easily done using many extensions for VS Code, what we need is ng rename to rename a component and also style, html and test files

[HunteRoi]

Hey guys!
Just wanted to check on the status of this issue for renaming components (.ts, .html, .css and .spec.ts files as well as the corresponding Component object).

I'd appreciate if anyone could tell me some - I hope, good - news!

[bvkeersop]

+1! I couldn't actually believe this isn't available yet!
It would be a really nifty feature...
renaming 4 files + a folder plus some references is pretty annoying!
Considering writing a script for it myself.

[Lagily]

Would definitely be a very nice feature to have, make it possible!

[sovushka-utrom]

I'm waiting for it as well! :)

[thegrims]

Here is a bash script I wrote to remove components. It is run like ./removeComponent myComponentName

This has only been tested with Angular 6

#!/bin/bash
if [ "$#" -ne 1 ]; then
    echo "Input a component to delete"
    exit 1
fi

# finds folder with component name and deletes
find . -type d -name $1 | xargs rm -rf

# removes lines referencing the component from app.module.ts
grep -v $1 app.module.ts > temp
mv temp app.module.ts

componentName=$1
componentName+="Component"

grep -v -i $componentName app.module.ts > temp
mv temp app.module.ts

[charlie39]

ng add not only installs but also edit project files. For example, if you add @angular/pwa,
it would deposits icons in src/assets/ directory and edits the root module.ts as well as put a

A remove should not only remode the package from node_modules but also under all these changes on project files.

You get a fair idea how difficult that is.

[hamed5765]

Hi guys! ✌️

We just wrote a tool to rename angular components.
Check it out https://www.npmjs.com/package/ng-rn

Hope you like it 🙃

(node:7652) UnhandledPromiseRejectionWarning: RangeError: Maximum call stack size exceeded
at NgRename.findNgProjectDir (C:\Users\Dell P1\AppData\Roaming\npm\node_modules\ng-rn\index.js:74:19)
at NgRename.findNgProjectDir (C:\Users\Dell P1\AppData\Roaming\npm\node_modules\ng-rn\index.js:81:19)
at NgRename.findNgProjectDir (C:\Users\Dell P1\AppData\Roaming\npm\node_modules\ng-rn\index.js:81:19)
at NgRename.findNgProjectDir (C:\Users\Dell P1\AppData\Roaming\npm\node_modules\ng-rn\index.js:81:19)
at NgRename.findNgProjectDir (C:\Users\Dell P1\AppData\Roaming\npm\node_modules\ng-rn\index.js:81:19)
at NgRename.findNgProjectDir (C:\Users\Dell P1\AppData\Roaming\npm\node_modules\ng-rn\index.js:81:19)
at NgRename.findNgProjectDir (C:\Users\Dell P1\AppData\Roaming\npm\node_modules\ng-rn\index.js:81:19)
at NgRename.findNgProjectDir (C:\Users\Dell P1\AppData\Roaming\npm\node_modules\ng-rn\index.js:81:19)
at NgRename.findNgProjectDir (C:\Users\Dell P1\AppData\Roaming\npm\node_modules\ng-rn\index.js:81:19)
at NgRename.findNgProjectDir (C:\Users\Dell P1\AppData\Roaming\npm\node_modules\ng-rn\index.js:81:19)
(node:7652) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block,
or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:7652) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[hamed5765]

The issue must be there ;
import { ModifierComponent } from './modifier.component'; //not found

describe('ModifierComponent', () => {
let component: ModifierComponent;
let fixture: ComponentFixture;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ModifierComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(ModifierComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

[itsems]

+1

[getsali]

+1

[zubeirtech]

+1 I just started using angular, coming from ember.js and that's literally the first thing I was searching for, on how to manipulate components using the cli. That's sad, I hope it will be added

[MA-Agent]

it has been almost 4 years and still no
ng rename ?
i'm considering writing a script myself ...

[AWSchneider-dev]

Forilla my Gorilla? This isn't a command?

[HunteRoi]

@MA-Agent I see you mentionned considering to write a script yourself. Do you have any news on that ? I am pretty sure a few people here might be interested :eyes:

[SaboSuke]

It's pointless really am just gonna right that script myself since they're not considering this as a must need command...

[xEt3]

+1

[sacgrover]

It's pointless really am just gonna right that script myself since they're not considering this as a must need command...

It seems easy but it has a big scope. When you remove a component then you will have to visit all files to check if it's component use anywhere else or not. While we add a component we mention module same we will have to do while removing.

[SchnWalter]

And what will you do if the component is moved in the directory of another module. Maybe you have modules in nested directories, or maybe you use some constants in order to avoid copy/paste between the declarations and exports of the @NgModule(). I think that this is way out of scope.

What will you do with page components? What about dialog that are used at runtime, that used to be in entryComponents, like dialogs. And then, what do you do with CSS classes and related things?

Here's an old "recursive rename" script of mine, it only updates content in the directory that you give it, and that directory needs to contain a single component (and with extra related things like component specific services)

recrename.sh.txt

---

My feeling is that this story is very much out of the scope for the Angular CLI.

Each project has it's own unique structure and if you really want to. You can implement your own schematic or maybe a 3rd party library could implement some generic schematics.

But I think that it will be to much work for the Angular CLI team to maintain. There will be way to many issues reported regarding this feature. So: :-1:

[dgp1130]

We discussed this issue within the CLI team today and had a few thoughts. This issue seems to cover multiple use cases, so to address them individually:

Delete component

There is not much the CLI can do in order to more intelligently delete an Angular component. We can't intelligently remove all references to a component, so it's up to the user to refactor their app such that a component isn't used. That is 90% of the meaningful effort around deleting a component, so manually deleting multiple files isn't consuming a critical amount of time.

A trivially simple command to do this would be:

rm foo.component.*
# OR
rm foo.service.*

The Angular CLI can't really be much more intelligent than this, so implementing it doesn't provide much value to users.

Move component

(In this context, I'm defining "moving" a component as moving it into a _different_ directory with the same name, as opposed to "renaming" a component which stays in the _same_ directory.)

Moving a component is quite tricky due to the way NgModules work. Many users would expect that moving a component from foo/ to bar/ would also change it to be included in @NgModule class Bar { } instead of @NgModule class Foo { } (depending on file structure). Currently the CLI doesn't have knowledge of NgModule structure like this. Even after moving a component into a different NgModule, it may break other modules which include Foo but do not include Bar. Whether it is reasonable to start depending on Bar requires application context which the CLI does not have.

Alternatively, the CLI could ignore NgModule and just move the component, but again that can be done with a trivially simple script.

mv foo.component.* bar/
# OR
mv foo.service.* bar/

IDEs can be a bit smarter about this and update imports to use the new path, but there's not much the CLI itself can do that would be better than that.

Rename component

(In this context, I'm defining "renaming" a component as staying in the _same_ directory, as opposed to "moving" it into a _different_ directory.)

If we only rename a component and keep it in the same directory, then that dodges a lot of the NgModule questions. There are some improvements which could be made here.

• Rename all the files associated with a component at once, in a single operation.
• Rename templateUrl and styleUrls: These are references to local files which would be renamed as part of the operation. It makes sense to rename these values as well. IDEs probably would not know to change this (some heuristics might cover this case though).
• Rename internal symbols: If you have a foo.component.ts with a export class FooComponent { }, and then renamed the file to bar.component.ts, it may be reasonable to also rename the class to BarComponent (this is probably more debatable, TBD if that is what users expect/want).

All of these are more of an IDE feature than a CLI feature. After some discussion among the CLI team, we feel that these features make more sense in the Angular language service than they do in the CLI itself. I believe there are often hooks to handle file renaming, where these features could be directly implemented. Through the language service, it could also provide these same features when moving across directories (ignoring the NgModule challenge). This would probably be a much cleaner user experience and would be much more usable than going through the CLI.

I filed https://github.com/angular/vscode-ng-language-service/issues/815 for the language service to make the changes there. However, we don't think it makes sense to include this kind of feature in the CLI itself. All these use cases are either handled just as well by existing well-known and supported tools, or would be better served in the language service than in the CLI.

[hiepxanh]

I agree with your opinions, this is really hard to let Angular CLI do this. The IDE should be more intelligent and can help refactor instead of Angular CLI. Thank for answer

[Sti2nd]

Hope there will be a language server for Angular left to implement this, seems like they lack manpower? https://github.com/angular/vscode-ng-language-service/issues/335

[semslam]

It will be nice-to-have rm remove command as some time we just create angular components and need to rename them. As this rename command is not there, deleting the created angular component, directive, etc and again running the command to create the component is a pain.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}