Не известен угловой элемент даже при использовании NO_ERRORS_SCHEMA

Question

У меня и Angular Popup Component используется следующим образом ( Онлайн пример ):

<popup>
  <anchor>
    Menu        
  </anchor>
  <window>
    <ul>
      <li>Item 1</li>           
      <li>Item 2</li>
    </ul>
  </window>
</popup>

Шаблон компонента:

<a class="anchor" (click)="toggle()">
  <ng-content select="anchor"></ng-content>
</a>
<div class="window" [hidden]="!active">
  <ng-content select="window"></ng-content>
</div>

Я получаюследующая ошибка:

Template parse errors: 'anchor' is not a known element:    
1. If 'anchor' is an Angular component, then verify that it is part of this module.    
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. 

Всплывающий модуль уже имеет NO_ERRORS_SCHEMA:

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';  
import { PopupComponent} from './popup.component';

@NgModule({  
  declarations: [PopupComponent],      
  imports: [CommonModule],  
  exports: [PopupComponent],
  schemas: [NO_ERRORS_SCHEMA]
})

export class PopupModule {}

И PopupComponent:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'popup',
  templateUrl: './popup.component.html'
})

export class PopupComponent {
  @Input() active: boolean = false;
  toggle() {
    this.active = !this.active;
  }
}

Чего мне не хватает?

Answer 1

Вы поместили элемент anchor в шаблон AppComponent.AppComponent определено в AppModule.

Итак, добавьте NO_ERRORS_SCHEMA к этому модулю:

@NgModule({  
  ...
  schemas: [ NO_ERRORS_SCHEMA ]
})

export class AppModule {}

Forked Stackblitz