Part-3 How to delete an lwc

Today we will see how to delete a lightning web component (lwc).

At some point of time, i felt, i want to delete an lwc and re-deploy it, but how to delete lwc..?

There are multiple ways to delete an lwc. Few of those ways were listed below..

1. Scratch org or Sandbox
   • From Developer console
   • From sfdx project —> delete command
2. Production
   • Workbench
   • Ant Migration Tool
   • From sfdx project —> delete command

lets see each of them.. firstly from sfdx project

DELETE lwc in ANY ORG  from sfdx project :

open command prompt and point to your sfdx project folder

Currently our project contains 2 components fetch and movieTile as shown..

lets say we wish to delete fetch lighting web component from sfdx project as well as from default ANY org.. so execute the below command

sfdx force:source:delete -m LightningComponentBundle:fetch -u username@company.com

NOTE : For -u parameter in above command, you can provide any user from production or sandbox or scratch-org, but we have make sure that, already we have connected / linked that user and that particular org with this project.. otherwise force:config:set username error will be thrown..

Give y as answer..

then we can observe that component is deleted from project folder as well as from Sandbox / Scratch Org as well..

DELETE lwc from Scratch Org / Sandbox in Developer Console :

In 45th version of tooling api developer guide, a new tooling object was added to represent lwc called LightningComponentBundle. This is different from the older one AuraDefinitionBundle.

NOTE : THIS KIND OF DELETION CAN BE IRREVERSIBLE

Just go to developer console, click on query editor tab, query all the components as below

SELECT Id,apiversion, developerName, FullName, targetConfigs FROM LightningComponentBundle

After checking the tooling api checkbox beside execute button, click on execute.

Select a component which you wish to delete, then click on delete button. This deletes the component provided that it is not referred in any lightning page.

lets see the other way…

Delete LWC from Production Org :

This needs some ground work

we can go for one of the 2 ways to delete an lwc.

1. Force.com ant Migration tool
2. Workbench

From beginners point of view.. lets go with workbench way because Ant migration tool requires installation and configuration, but workbench is cloud based..

choose 45+ version so that workbench supports lwc

click deploy under migration tab

open notepad or notepad++ create a file with name destructiveChanges.xml, paste the following code and save it

<?xml version="1.0" encoding="UTF-8"?>
<Package xmlns="http://soap.sforce.com/2006/04/metadata">
    <types>
        <members>fetch</members>
        <name>LightningComponentBundle</name>
    </types>
</Package>

In the above file, as i want to delete an lwc with api Name / developerName – fetch, so place the developerName of your lwc to delete in the members tag.

open notepad or notepad++ create a file with name package.xml, paste the following code and save it.

<?xml version="1.0" encoding="UTF-8"?>
<Package xmlns="http://soap.sforce.com/2006/04/metadata">
    <version>45.0</version>
</Package>

Select both the files and create a zip with name name destructiveChanges

Don’t forget to check the checkbox, Single Package

Then Click on Next and deploy

If Status is success, then component is Deleted

So now you can check in production org or re-query the lightningComponentBundle from developer console to find that the fectchAPI component is deleted.

NOTE : Before you try to delete lwc, make sure that the component is not used in any of the lightning page / app, or else deletion operation will fail and throws an error.

NOTE : The similar kind of steps can be followed from command prompt by using ant migration tool as an alternative way of deleting lwc.