How to remove components created with Angular-CLI

Question

I am working on angular2 for my new project, newly with this technology. I have set-up my project with angular CLI (Reference site https://github.com/angular/angular-cli). I have created 4 components using command ng generate component my-new-component For testing purpose, created one component app-testing, need to remove that component from my project. Else need to rename for that component. I have tried several like. ng destroy component app-testing but showing error The destroy command is not supported by Angular-CLI., Please help me with solution. Thanks in advance.

This happens all the time. The first result by my search engine bought me here. The original SO linked as duplicate was in 3rd place. — fde-capu, Jan 19 '23 at 12:56

score 33 · Accepted Answer · answered Feb 12 '17 at 10:11

33

I had the same problems and it seems that they removed the destroy command from the CLI and you need to do it manually by deleting or renaming the according folders/files and imports, which is really a laborious task.

https://github.com/angular/angular-cli/issues/900 https://github.com/angular/angular-cli/issues/1788

answered Feb 12 '17 at 10:11

Carsten H

831
15
32

10

would be useful to see them adding in an automated command again. Whole point of the CLI is to make your life easier (rather than blocking you from using commands). – Luke Brown Mar 07 '17 at 15:47
see my answer... there are better ways to "undo" now. – FlavorScape Oct 18 '18 at 23:06
better is to use --dry-run for example ng g c componentName --dry-run command it will show you what component is going to create and at what location and if you are ok then run the same command without --dry-run – Engineer Jun 30 '20 at 12:27

score 10 · Answer 2 · answered Dec 22 '17 at 09:55

10

You can delete any component by removing all its lines from app.module.ts . Its working fine for me.

answered Dec 22 '17 at 09:55

sumit gupta

101
1
2

see my answer... there are better ways to "undo" now. – FlavorScape Oct 18 '18 at 23:06

score 2 · Answer 3 · answered Jun 06 '17 at 11:54

version control is your friend here, do a diff or equivalent and you should see what's been added/modified.

In fact, removing the component folder might not be enough; with Angular-CLI v1.0, the command ng generate component my-new-component also edits your app.module.ts file by adding the respective import line and the component to the providers array.

score 2 · Answer 4 · answered Jan 10 '18 at 16:29

2

You should remove your component manually, that is...

[name].component.ts
[name].component.html  // if you've used templateUrl in your component
[name].component.spec.ts  // if you've created test file
[name].component.[css or scss]  // if you've used styleUrls in your component

If you have all that files in a folder, delete the folder directly.

Then you need to go to the module which use that component and delete

import { [component_name] } from ...

and the component on the declarations array

That's all. Hope that helps

answered Jan 10 '18 at 16:29

Cruz Jurado

181
1
8

Yes, you're right. For now, there isn't better way to remove the component beside manual removing. – Dimang Chou Feb 24 '18 at 20:57
@Dimang Chou see my answer... there are better ways to "undo" now. – FlavorScape Oct 18 '18 at 23:06
3

Don't look at @FlavorScape 's answer... – Danny Jun 22 '20 at 15:52

score 1 · Answer 5 · answered Mar 15 '18 at 09:36

1

No As of now you can't do this by any command. You've to remove Manually from app.module.ts and app.routing.module.ts if you're using Angular 5

answered Mar 15 '18 at 09:36

Hidayt Rahman

2,490
26
32

score 0 · Answer 6 · answered Dec 05 '17 at 08:06

0

I had the same issue, couldn't find a right solution so I have manually deleted the component folder and then updated the app.module.ts file (removed the references to the deleted component) and it worked for me.

answered Dec 05 '17 at 08:06

Jayampathy Wijesena

1,670
1
18
26

score -1 · Answer 7 · answered Apr 02 '17 at 20:13

-1

I tried ng remove component Comp_Name also ng distroy component but it is not yet supported by angular so the best option for now is to manually remove it from the folder structure.

answered Apr 02 '17 at 20:13

Asif Karim Bherani

1,023
1
13
25

score -1 · Answer 8 · answered Mar 14 '18 at 07:16

-1

This is the NPM known Issue for windows that NPM is pretty much unusable under Windows. This is of course related to the path size limitations.

https://github.com/npm/npm/issues/5641

My main concern here is that there are no mention of these issues when installing node or npm via the website. Not being able to install prime packages makes npm fundamentally unusable for windows.

answered Mar 14 '18 at 07:16

eli

8,571
4
30
40

Nothing to do with the OP question. – user3658510 Aug 02 '22 at 15:31

score -4 · Answer 9 · answered Dec 13 '17 at 00:17

-4

Try to uninstall angular and then reinstall

npm uninstall --save @angular/(then whatever component you want deleted)

after that, a box with babyblue color border will appear with suggestion to update and install angular back up.

answered Dec 13 '17 at 00:17

N Ouk

1
5

score -8 · Answer 10 · answered Oct 18 '18 at 23:04

-8

There's the --dry-run flag which will allow you to preview the changes, and/or you can use the Angular Console App to generate the cli flags for you, using their easy GUI. It auto-previews everything before you commit to it.

answered Oct 18 '18 at 23:04

FlavorScape

13,301
12
75
117

8

have you read the question? `How to remove components...` – Pardeep Jain Oct 30 '18 at 09:03

How to remove components created with Angular-CLI

10 Answers10