[SalesForce] Error when trying to remove a lightning component’s

Scenario:

I have a lightning component for my Save and Submit buttons. I thought I will need to add a design attribute and made the following changes:

Design

<design:component>
    <design:attribute name="taxRate" label="Tax Rate in %"/>
    ....
</design:component>

Component

<aura:component controller="FormController" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <aura:attribute name="taxRate" type="String" access="global"/>
    ....
</aura:component>

After applying these changes, I found another method that renders this attribute useless. In the process of reverting the aforementioned changes returns the following error:

Failed to save undefined: Cannot remove design attributes when the component implements a Lightning Page interface.: Source

Problem:

How do I remove a design:attribute and it's corresponding aura:attribute?

Attempted fixes:

I tried to follow the tips in this link: Tips and Considerations for Configuring Components for Lightning App Builder

Also tried removing the component from the lightning apps before trying again without success.

Best Answer

This is a bit tricky Exercise .In fact the error gives an idea on why this showing up .When you have implemented a lightning Interface of AllPageTypes which means you cannot get rid of design file attributes

Step 0 - you might have to delete Lightning Pages that make reference to the component. Otherwise Salesforce might show an error when you try to remove the interface (or fields).

Step 1 - Lets remove the Interface from your code first ,so try removing the implements attribute

     <aura:component controller="FormController" access="global">
     <aura:attribute name="taxRate" type="String" access="global"/>
     ....
          </aura:component>

Step 2 - Remove the Design attribute now .

Step 3 - Remove the Attribute once you have removed the designed reference

Step 4 - Add the implements and other code back .