Lightning Web Component Not Working in Contact Detail Page - salesforce

Question

I have the following lightning web component.
MyPage.html
<template>
<lightning-record-form
object-api-name={contactObject}
fields={myFields}
onsuccess={handleContactCreated}>
</lightning-record-form>
</template>
MyPage.js
import { LightningElement } from 'lwc';
import CONTACT_OBJECT from '#salesforce/schema/Contact';
import NAME_FIELD from '#salesforce/schema/Contact.Name';
export default class ContactCreator extends LightningElement {
contactObject = CONTACT_OBJECT;
myFields = [NAME_FIELD];
handleContactCreated(){
// Run code when account is created.
}
}
This works if I drop this lightning component in Account record detail page.
But it does not work in Contact record detail page.
No matter how many times I save it, it disappears. when I come and check it again in the contact record detail page, it's not there.
Can someone help ?

Answer 1

You must have a reference to the Contact page in your web components meta.xml file. I'm assuming yours looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"
fqn="nameOfComponent">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Account</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
when you need to add Contact as an object inside the objects tags.