为什么Angular模板中的section标签会提前闭合报错

模板中存在未闭合的div标签，导致解析器判定section被提前关闭：

• 代码第三行声明了绑定(click)="$event.stopPropagation()"的div开标签，但全文没有对应的</div>闭合标签
• 现有代码缩进不规范，开标签后的内容没有做对应层级缩进，肉眼排查很容易遗漏这个未闭合标签
• Angular按照HTML标准嵌套规则解析模板时，会维护打开的标签栈，解析到末尾的</section>时，栈顶仍为未闭合的div，不符合标签嵌套顺序要求，因此抛出标签提前关闭的错误。

根据实际交互逻辑选择补全位置即可：

• 若仅需要关闭按钮阻止点击冒泡：在关闭按钮</button>后直接补上</div>
• 若需要整个弹窗内容区都阻止点击冒泡（常规弹窗逻辑，点击内容区不触发外层section的关闭事件）：将缺失的</div>补在class="dateAlignment"的div闭合标签之后、</section>之前。

下面是符合常规弹窗交互逻辑的修复后完整代码：

<ng-container *ngIf="display$ | async as display">
    <section [class.open]="display === 'open'" (click)="close()">
        <div (click)="$event.stopPropagation()">
            <button class="close" type="button" (click)="close()">X</button>
    
            <div class="dateAlignment">
                <div class="dateComponent">
                    <div class="date-selection">        
                        <div class="month">
                            <input type="text" [(ngModel)]="selectedMonth" list="correctionMonth" placeholder="Month...." >
                            <datalist id="correctionMonth">
                                <option value="{{item.Name}}" [selected]="item.isSelected" *ngFor="let item of selectedMonthArray">{{item.id}}</option>
                            </datalist>
                        </div>
                        <div class="year">
                            <input type="text" [(ngModel)]="selectedYear" list="correctionYear" placeholder="Year...." >
                            <datalist id="correctionYear">
                                <option value="{{item}}" *ngFor="let item of yearArray">{{item}}</option>
                            </datalist>
                        </div>    
                    </div>
                    <div class="buttongroup">
                        <div class="submit">
                            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                                <div class="btn-group btn-group-lg" role="group" aria-label="First group">
                                    <button type="button" class="btn btn-secondary reportButton">Correction Notices</button>
                                    <button type="button" class="btn btn-secondary reportButton">Display Tablular Data</button>
                                    <button type="button" class="btn btn-secondary reportButton">Mailing Labels</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="submitgroup">
                        <div class="reportApplication">
                            <button type="button" class="btn btn-success">Apply</button>
                            <button type="button" class="btn btn-danger">Reset</button>      
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>    
</ng-container>

小提示：后续写模板时保持缩进和标签层级对应，开启标签后立刻补写闭合标签再填充内容，可以大幅减少这类漏写闭合的问题。

报错截图

内容的提问来源于stack exchange，提问作者GettingStarted