function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
wasabi 865wasabi 865 

Embed a web component within another web component

So I have been searching for days, to find out how to embed a Web component within another web component. I have a conditional statement that will include another web component if it evalutes to true, but I can't seem to get it to work. I get the following error when I try to deploy it: 
/c/eCms_cancelModal_lwc/eCMS_CancelModal_LWC.js:0,0 : LWC1010: Failed to resolve entry for module "eCMS_CancelModal_LWC"

Listed below is a snippet of the code causing the error. Any help would be greatly appreciated. 
Thanks,
Niels

WEB COMPONENT (HTML) 1

<template if:true={openmodel}>
    <c-e-cms_cancel-modal_lwc source="lwc/eCMS_CancelModal_LWC"></c-e-cms_cancel-modal_lwc>
</template>

WEB COMPONENT (HTML) 2
<template>
<!--NJ call component here, so remove the following once I get it working. -->
<div class="slds-m-bottom_none slds-m-top_none" style="height: 640px;">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close" size="medium">
</lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">(VERSION 2) Please Enter Cancellation Justification</h2>
</header>
<div class="slds-modal__content slds-p-around_medium">
<p></p>
<lightning-input label="Justification" class="slds-size--1-of-1"></lightning-input><br/>
</div>
<footer class="slds-modal__footer">
<lightning-button label="Save" variant="brand" onclick={saveMethod}></lightning-button>&nbsp;&nbsp;&nbsp;&nbsp;
<lightning-button label="Cancel" variant="neutral" onclick={closeModal}></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</template>

WEB COMPONENT (JS) 2
import { LightningElement, track, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
//import { getRecord } from 'lightning/uiRecordApi';
export default class ECMS_CancelModal_LWC extends LightningElement {
@api recordId;
@track openmodel = false;
//openmodal() {
// this.openmodel = true;
//}
closeModal() {
this.openmodel = false;
}
saveMethod() {
// Navigate to a URL
this[NavigationMixin.Navigate]({
type: 'standard__webPage',
attributes: {
url: '/apex/Apttus__AgreementCancel?id=' + this.recordId
}
});
//this.closeModal();
}
}
Raj VakatiRaj Vakati
Change your first web component as like below and you no need to sepecify the source attribute 
 
 
<template if:true={openmodel}>
    <c-e-cms_cancel-modal_lwc ></c-e-cms_cancel-modal_lwc>
</template>

 
wasabi 865wasabi 865
Thanks Raj. I actually tried that and it didn't work. However, once I renamed the web component in proper Camel case it worked, and removed the source attribute. It appears that web components, as well as Visual Studio Code, are very sensitive to mixed case unless it's strict camel case. The following worked.
        <template if:true={openmodel}>
            <c-custom-modal></c-custom-modal>
        </template>
zas Zhengzas Zheng
Hi ,
Try replace <c-e-cms_cancel-modal_lwc > with <c-e-c-m-s_cancel-modal_l-w-c></c-e-c-m-s_cancel-modal_l-w-c>
 
textualtextual
I am having a similar issue using a component with an underscore in the name
abcThing_Base and using c-abc-thing_base results in LWC1010: Failed to resolve entry for module
Is there a way to query salesforce and get the name it thinks it has?