ngTemplateOutlet recursive problem

Today, try to implement a recursive by ng-template plus ngTemplateOutlet menu. But I encountered a problem: NullInjectorError: No provider for NzMenuDirective!
That zerro instructions found. If zerro instructions can be displayed properly removed. Zerro module is thought not to import, but do not try ng-template, but directly write 'nz-menu-item' on the menu can be successfully zerro display.

Ultimately concluded, zerro and ngTemplateOutlet can not be combined. Recursion should use component, should not be used ngTemplateOutlet

reference:

 https://github.com/NG-ZORRO/ng-zorro-antd/issues/3490#issuecomment-495630765

https://github.com/angular/angular/issues/14842

 

 

<ng-container *ngTemplateOutlet="menuItemNode; context: {menus_:menus}"></ng-container>

<ng-template #menuItemNode let-theMenus="menus_">
  <ng-container *ngFor='let menu of theMenus'>
    <li *ngIf='menu.childrens.length==0' nz-menu-item>
      <span title>
        <i type="mail"></i>
        <span>{{menu.resourceName}}</span>
      </span>
    </li>
    <li *ngIf='menu.childrens.length!=0'>
      <span title>
        <i type="appstore"></i>
        <span>{{menu.resourceName}}</span>
      </span>
      <ul style="padding-left: 5px">
        <ng-container *ngTemplateOutlet="menuItemNode; context: {menus_:menu.childrens}"></ng-container>
      </ul>
    </ Li > 
  </ a-container > 
</ the-template >