Not a known element in angular even when using NO_ERRORS_SCHEMA

Question

I have and Angular Popup Component used as follows (Online Example):

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

An the component template is:

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

I am getting the following error:

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. 

The Popup Module already has 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 {}

And the PopupComponent is:

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;
  }
}

What am I missing?

Answer 1

You placed the anchor element in AppComponent template. AppComponent is defined in AppModule.

So add NO_ERRORS_SCHEMA to that module:

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

export class AppModule {}

Forked Stackblitz