Unable to load VF Component in the VF Email Template

Question

I am facing issues while developing Visualforce email template. I am unable to add VF components in the Visualforce email template. Looks everthing good to me, but not sure why VF Component not loading ?

AccountTemplate

public class AccountTemplate {
    public Id accountId {get;set;}

    public List<Opportunity> getopptys(){
        List<Opportunity> oppList = [SELECT Name, StageName,CloseDate FROM Opportunity WHERE Accountid =: accountId];
        return oppList;
    }
}

AccountTemplateVFComponent

<apex:component controller="AccountTemplate" access="global">
    <apex:attribute name="AcctId" type="Id" description="Id of the Account" assignTo="{!accountId}" >
        <table border="1" cellspacing="5">
            <tr>
                <td>Opportunity Name</td>
                <td>Opportunity Stage</td>
                <td>Close Date</td>
            </tr>
            <apex:repeat value="{!opptys}" var="o">
                <tr>
                    <td>{!o.Name}</td>
                    <td>{!o.StageName}</td>
                    <td>{!o.CloseDate}</td>
                </tr>
            </apex:repeat>
        </table>
    </apex:attribute>
</apex:component>

I dont see table in the Preview, what is the issue ?

Answer 1

I was able to solve this issue. Not sure what went wrong, but now I see the details:

<messaging:emailTemplate subject="List of opportunity" recipientType="User" relatedToType="Account">

    <messaging:htmlEmailBody >
        Hi,<br/>
        Below is the list of opportunities for your account {!relatedTo.Name}.<br/><br/>

        <c:AccountTemplateVFComponent AcctId="{!relatedTo.Id}" /><br/><br/>

        <b>Regards,</b><br/>
        {!recipient.FirstName} {!recipient.LastName}

    </messaging:htmlEmailBody>

</messaging:emailTemplate>

VFPage

<apex:component controller="AccountTemplate" access="global">
    <apex:attribute name="AcctId" type="Id" description="Id of the account" assignTo="{!accountId}"/>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        td  {
            border: 1px solid;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>
    <table cellspacing = "5">
        <tr>
            <td><b>Opportunity Name</b></td>
            <td><b>Opportunity Stage</b></td> 
            <td><b>Closed Date</b></td>
        </tr>
        <apex:repeat value="{!opptys}" var="o">
        <tr>
            <td>{!o.Name}</td>
            <td>{!o.StageName}</td>
            <td>{!o.CloseDate}</td>
        </tr>
        </apex:repeat>       
    </table>
</apex:component>