Angular2 CUSTOM_ELEMENTS_SCHEMA Doesn't Work

Question

I have just installed a bearbones ng2 app using the ng2 cli. In my AppModule I added schema: [ CUSTOM_ELEMENTS_SCHEMA ], and in my AppComponent template I have <row></row>. But I'm getting-

Unhandled Promise rejection: Template parse errors: 'row' is not a known element: 1. If 'row' is an Angular component, then verify that it is part of this module. 2. If 'row' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]

AppModule-

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

import { AppComponent } from './app.component';


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

AppComponent-

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

AppComponentTemplate-

<row></row>

It's really that simple. What the heck is going on?

Edit:

All of the answers below are satisfactory and provide insight into the problem. @yurzui I especially like your answer for providing the source. I wish I could give you all the accepted answer! But I will choose @camaron for being the first and giving the direct solution to my problem. If you find this question via google please give @yurzui, @camaron, and @Aravind a +1 for helping with this issue!

Answer 1

You need to add the RowComponent to be imported by your AppModule

imports: [RowComponent]

Edit:

Use NO_ERRORS_SCHEMA, this is because angular is trying to find an component that doesn't exists.

CUSTOM_ELEMENTS_SCHEMA is for components with a - in the selector name.

Answer 2

If you take a look at changelog https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc5-2016-08-09

By default, Angular will error during parsing on unknown properties, even if they are on elements with a - in their name (aka custom elements). If you application is using custom elements, fill the new parameter @NgModule.schemas with the value [CUSTOM_ELEMENTS_SCHEMA].

then you can understand that you need to have tag with - delimiter

if (tagName.indexOf('-') > -1) {
      if (tagName === 'ng-container' || tagName === 'ng-content') {
        return false;
      }

      if (schemaMetas.some((schema) => schema.name === CUSTOM_ELEMENTS_SCHEMA.name)) {
        // Can't tell now as we don't know which properties a custom element will get
        // once it is instantiated
        return true;
      }
}

https://github.com/angular/angular/blob/2.4.8/modules/%40angular/compiler/src/schema/dom_element_schema_registry.ts#L290

so something like my-row should work