How to embed one lightning web component in another web component

Question

I have a component where i need to embed it to another component i am getting the below error

No MODULE named markup://c:lifeCycleChild found : [markup://c:lifeCycleParent]

Below is My code :

1st Component : LifeCycleParent

<template>    
    <lightning-card  title="LifeCycleHooks parent component">
        <div class= "slds-var-m-around_medium">
            <input type="text" onkeyup={changeHandler}/>
            {name}
            <c-life-cycle-child></c-life-cycle-child>
        </div>    
    </lightning-card>
</template>

Js file :

import { LightningElement } from 'lwc';

export default class LifeCycleParent extends LightningElement {

    constructor() {
        super()
        console.log("parent constructor called")

    }
    connectedCallback() {
        console.log("parent connectedCallback called")
    }
    renderedCallback() {
        console.log("parent renderedCallback called")
    }

    name

    changeHandler(event) {
        this.name = event.target.value
    }
}

XML file :

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
      <targets>
     <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

2nd component: lifeCycleChild HtML file :

<template>
    <lightning-card  title="LifeCycleHook child component">
        <div class= "slds-var-m-around_medium">
         </div>
    </lightning-card>
</template>

Js file :

import { LightningElement } from 'lwc';

export default class LifeCycleChild extends LightningElement {
    constructor() {
        super()
        console.log("child constructor called")

    }
    connectedCallback() {
        console.log("child connectedCallback called")
    }
    renderedCallback() {
        console.log("child renderedCallback called")
    }
}

Could you please help me understand why i am getting the above error

Answer 1

This error is coming because your are trying to deploy a component in the org for which dependecy is not available yet in the org. LifeCycleParent includes LifeCycleChild component and is dependent on the child component. You can deploy in 2 ways:

1. Include both component file name in mainfest -> package.xml file

<Package xmlns="http://soap.sforce.com/2006/04/metadata">
    <types>
        <members>lifeCycleParent</members>
        <members>lifeCycleChild</members>
        <name>LightningComponentBundle</name>
    </types>
    <version>49.0</version>
</Package>

2. If you are deploying components one at time using VS code right click and deploy this source to org option, then first you have to deploy lifeCycleChild component and then lifeCycleParent component.