Angular 2 existing selector is not a known element

Question

I've tried every combination I can think of...

I'm trying to add a WYSIWYG editor into Angular 2.

but no matter what I do, I get 'editor is not a known element'

It is imported. it is declared. the selector exists.

I'm completely stumped.

EditorComponent

    import {NgModule, Component, ElementRef, AfterViewInit, Input, Output, EventEmitter, ContentChild, OnChanges, forwardRef} from '@angular/core';
    import {CommonModule} from '@angular/common';
    import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';

    @Component({
        selector: 'header',
        template: '<ng-content></ng-content>'
    })
    export class Header { }

    declare var Quill: any;

    export const EDITOR_VALUE_ACCESSOR: any = {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => EditorComponent),
        multi: true
    };

    @Component({
        selector: 'editor',
        templateUrl: "./editor.component.html",
        providers: [EDITOR_VALUE_ACCESSOR]
    })
    export class EditorComponent implements AfterViewInit, ControlValueAccessor {
        ...
        ...
    }

EditorModule

import { NgModule } from '@angular/core';
import { CommonModule } from "@angular/common";
import { ReactiveFormsModule } from "@angular/forms";
import { RouterModule } from '@angular/router';

import { EditorComponent } from "./editor.component";


const declarables = [EditorComponent];

@NgModule({
    imports: [CommonModule, ReactiveFormsModule, RouterModule],
    exports: [declarables],
    declarations: [declarables],
})
export class EditorModule { }

app.module

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { HttpModule }           from '@angular/http';
import { FormsModule }          from '@angular/forms';

import { AppComponent }         from './app.component';
import { routing,
         appRoutingProviders }  from './app.routing';


import { BlogModule }           from './blog/blog.module'

import { LoginComponent }       from './user/login.component';
import { NavComponent }         from './nav/nav.component';

import { DialogService }        from './dialog.service';

import { CKEditorModule }       from 'ng2-ckeditor';

@NgModule({
  imports: [
    BrowserModule,
    CKEditorModule,
    HttpModule,
    FormsModule,
    routing,
    BlogModule,
  ],
  declarations: [
    AppComponent,
    LoginComponent,
    NavComponent,
  ],
  providers: [
    appRoutingProviders,
    DialogService
  ],
  bootstrap: [ AppComponent ],

})
export class AppModule {
}

blog-edit.component

import { Component, OnInit, HostBinding,
         trigger, transition, animate,
         style, state } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

import { BlogService }  from './blog.service';

import { BlogPost }   from '../model/blog-post';

import { EditorModule } from '../editor/editor.module'

@Component({
  templateUrl: './blog-edit.component.html',
  styleUrls: ['blog-edit.component.scss'],
  animations: [
    trigger('routeAnimation', [
      state('*',
        style({
          opacity: 1,
          transform: 'translateX(0)',
        })
      ),
      transition('void => *', [
        style({
          opacity: 0,
          transform: 'translateX(-100%)'
        }),
        animate('0.2s ease-in')
      ]),
      transition('* => void', [
        animate('0.5s ease-out', style({
          opacity: 0,
          transform: 'translateY(100%)'
        }))
      ])
    ])
  ]
})
export class BlogEditComponent implements OnInit {
    ...
    ...
    ...
}

blog-edit.html

<editor></editor>

Answer 1

@NgModule({
    imports: [CommonModule, ReactiveFormsModule, RouterModule],
    exports: [declarables],
    declarations: [declarables],
})

should be

@NgModule({
    imports: [CommonModule, ReactiveFormsModule, RouterModule],
    exports: declarables,
    declarations: declarables,
})