Angular 2 RC6 - “sidebar” is not a known element

Question

I just updated to RC6 and have trouble with the following error:

zone.min.js:1 Unhandled Promise rejection: Template parse errors: 'sidebar' is not a known element: 1. If 'sidebar' is an Angular component, then verify that it is part of this module. 2. If 'sidebar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

sidebar isn't a component. Just a html-tag i am using in one of my templates. They look like this:

...
<sidebar class="main-nav">
    ...
</sidebar>
...

I tried updating my NgModule AppModule with CUSTOM_ELEMENTS_SCHEMA like this:

@NgModule({
    declarations: [...],
    providers: [...],
    imports: [BrowserModule, routing, HttpModule, FormsModule, TranslateModule.forRoot()],
    bootstrap: [AppComponent],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

But that doesn't seem to do anything.

Does anyone haven an idea or a hint?

Answer 1

Thanks to Pankaj Parkar for his comment.

sidebar seems not to to be accepted yet. I had to implement a workaround.

sidebar.directive.ts

import { Directive } from '@angular/core';

/**
 * dummy directive to allow html-tag "sidebar"
 */
@Directive({ selector: 'sidebar'})
export class SidebarDirective {}

Include it in app.module.ts

@NgModule({
    declarations: [..., SidebarDirective],
...
})
export class AppModule { }

Answer 2

Rather than go for workaround I'd say that whenever you wanted to create component, have some suffix before component selector. Like suppose my application name is MoneyManagement so then I'll be adding mm- before each of my application component. This habit will reduce the chances to conflict with any reserve HTML tag/element or sidebar component added by plugin.

Unlike the workaround would not work in future when you add bootstrap/any plugin component here which has sidebar component already defined.

Just following such kind of convention would avoid this issue in future.

<mm-sidebar class="main-nav">
    ...
</mm-sidebar>