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

Answer 3

The following are your mistakes

1. You have imported only AppComponent but it does not have any element with <row> as its template.
2. CUSTOM_ELEMENTS_SCHEMA need not be used during application development as it is used to hide errors that are caused occurs when templates are being parsed (as said in your error description).
3. <app-root> is the selector for your AppComponent, but you have used <row> in your html of the AppComponent.

Based on your requirement, I can suggest with various fixes. Comment with your desired outcome and I shall update answer based on them.