CUSTOM_ELEMENTS_SCHEMA добавлен в NgModule.schemas все еще показывает ошибку

Я только что перешел с Angular 2 RC4 на RC6 и у меня возникли проблемы с этим.

Я вижу следующую ошибку на моей консоли:

Unhandled Promise rejection: Template parse errors:
'cl-header' is not a known element:
1. If 'cl-header' is an Angular component, then verify that it is part of this module.
2. If 'cl-header' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<main>
    [ERROR ->]<cl-header>Loading Header...</cl-header>
    <div class="container-fluid">
      <cl-feedbackcontai"): AppComponent@1:4

Вот мой компонент заголовка:

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

// own service
import { AuthenticationService } from '../../../services/authentication/authentication.service.ts';

import '../../../../../public/css/styles.css';

@Component({
  selector: 'cl-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent { // more code here... }

Вот мой модуль заголовка:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA }      from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule }      from '@angular/common';
import { FormsModule }      from '@angular/forms';

import { HeaderComponent }  from './../../../components/util_components/header/header.component.ts';

@NgModule({
    declarations: [ HeaderComponent ],
    bootstrap:    [ HeaderComponent ],
    imports: [ RouterModule, CommonModule, FormsModule ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class HeaderModule { }

Я создал модуль-обертку с именем util module, который импортирует HeaderModule:

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

import {HeaderModule} from "./header/header.module";
// ...

@NgModule({
    declarations: [ ],
    bootstrap:    [ ],
    imports: [ HeaderModule]
})
export class UtilModule { }

Который наконец импортируется AppModule:

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

import { BrowserModule } from '@angular/platform-browser';

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

import {UtilModule} from "./modules/util_modules/util.module";
import {RoutingModule} from "./modules/routing_modules/routing.module";

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [BrowserModule, UtilModule, RoutingModule]
})
export class AppModule { }

Насколько я понимаю, я следую инструкциям сообщения об ошибке, используя SCHEMA для устранения ошибки. Но, похоже, не работает. Что я делаю не так? (Надеюсь, ничего очевидного в данный момент я не вижу. Последние 6 часов я потратил на обновление до этой версии ...)

Просто хотел добавить немного больше об этом.

В новом выпуске angular 2.0.0 (14 сентября 2016 г.), если вы используете пользовательские теги html, он сообщит об этом Template parse errors. Пользовательский тег - это тег, который вы используете в своем HTML, но он не является одним из этих тегов .

Похоже, что строка schemas: [ CUSTOM_ELEMENTS_SCHEMA ]должна быть добавлена ​​к каждому компоненту, где вы используете пользовательские теги HTML.

EDIT:schemas декларация должна быть в @NgModuleдекоратора. В приведенном ниже примере показан пользовательский модуль с пользовательским компонентом, CustomComponentкоторый допускает использование любого html-тега в html-шаблоне для этого одного компонента.

custom.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CustomComponent } from './custom.component';

@NgModule({
  declarations: [ CustomComponent ],
  exports: [ CustomComponent ],
  imports: [ CommonModule ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CustomModule {}

custom.component.ts

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

@Component({
  selector: 'my-custom-component',
  templateUrl: 'custom.component.html'
})
export class CustomComponent implements OnInit {
  constructor () {}
  ngOnInit () {}
}

custom.component.html

Здесь вы можете использовать любой HTML-тег, который вы хотите.

<div class="container">
  <boogey-man></boogey-man>
  <my-minion class="one-eyed">
    <job class="plumber"></job>
  </my-minion>
</div>

Это исправлено:

а) добавление schemas: [ CUSTOM_ELEMENTS_SCHEMA ]к каждому компоненту или

б) добавление

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

и

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

к вашему модулю.

Это также может возникнуть при запуске модульных тестов, если вы тестируете компонент с пользовательскими элементами. В этом случае custom_elements_schema необходимо добавить в модуль testingModule, который запускается в начале файла .spec.ts для этого компонента. Вот пример начала установки header.component.spec.ts:

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

describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [PrizeAddComponent],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA
      ],
    })
      .compileComponents();
  }));

Добавьте следующее @NgModule({})в "app.module.ts":

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;

а потом

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Ваш app.module.ts должен выглядеть так:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

У меня это тоже не сработало. Я изменился

CUSTOM_ELEMENTS_SCHEMA

для

NO_ERRORS_SCHEMA

который был предложен в этой статье: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Теперь это работает.

util.component.ts

@Component({
    selector: 'app-logout',
    template: `<button class="btn btn-primary"(click)="logout()">Logout</button>`
})
export class LogoutComponent{}

util.module.ts

@NgModule({
    imports: [...],
    exports: [
        LogoutComponent
    ],
    declarations: [LogoutComponent]
})
export class AccountModule{};

LogoutComponent Нужно экспортировать

импортAccountModule<app-logout> dashboard.module.ts в модуле, где мы хотим использовать import {AccountModule} из 'util.module';

@NgModule({
  imports: [
    CommonModule, AccountModule
  ],
  declarations: [DashboardComponent]
})
export class DashboardModule { }

dashboard.component.ts

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

@Component({
  selector: 'app-dashboard',
  template: `<div><app-logout></app-logout></div>`
})
export class DashboardComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
}

Я не обязан импортировать и использовать CUSTOM_ELEMENTS_SCHEMA.
однако, это не работает, когда dashboard.module загружен лениво.
При использовании CUSTOM_ELEMENTS_SCHEMAв случае отложенной загрузки ошибка подавляется, но компонент не добавляется в dom.

С компонентами, содержащими Angular Material, похожая ошибка возникла при моих модульных тестах. В соответствии с ответом @Dan Stirling-Talbert выше, я добавил это в мой файл .spec компонента, и ошибка была очищена из моих модульных тестов.

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

Затем добавьте схему в сгенерированный оператор beforeEach ():

beforeEach(asyn(() => {
    declarations: [ AboutComponent ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
.compileComponents();
}));

Моя ошибка кармы: если 'mat-panel-title' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение.

Просто прочитайте этот пост и согласно угловым 2 документам:

export CUSTOM_ELEMENTS_SCHEMA
Defines a schema that will allow:

any non-Angular elements with a - in their name,
any properties on elements with a - in their name which is the common rule for custom elements.

Так что на всякий случай, если кто-то столкнется с этой проблемой, после того, как вы добавили CUSTOM_ELEMENTS_SCHEMA в свой NgModule, убедитесь, что у любого нового пользовательского элемента, который вы используете, есть «тире» в его имени, например. или т. д.

Это довольно длинный пост, и он дает более подробное объяснение проблемы.

Проблема (в моем случае) возникает, когда у вас есть мультислот-проекция контента

Смотрите также контент проекции для получения дополнительной информации.

Например, если у вас есть компонент, который выглядит следующим образом:

HTML-файл:

 <div>
  <span>
    <ng-content select="my-component-header">
      <!-- optional header slot here -->
    </ng-content>
  </span>

  <div class="my-component-content">
    <ng-content>
      <!-- content slot here -->
    </ng-content>
  </div>
</div>

TS файл:

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss'],
})
export class MyComponent {    
}

И вы хотите использовать это как:

<my-component>
  <my-component-header>
    <!-- this is optional --> 
    <p>html content here</p>
  </my-component-header>


  <p>blabla content</p>
  <!-- other html -->
</my-component>

И затем вы получаете ошибки синтаксического анализа шаблона, которые не являются известным Angular-компонентом, и на самом деле это не так - это просто ссылка на ng-контент в вашем компоненте:

И тогда самое простое исправление - это добавление

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

... в ваш app.module.ts

Но есть простой и понятный подход к этой проблеме - вместо использования <my-component-header>для вставки html в слот - вы можете использовать имя класса для этой задачи, например:

HTML-файл:

 <div>
  <span>
    <ng-content select=".my-component-header">  // <--- Look Here :)
      <!-- optional header slot here -->
    </ng-content>
  </span>

  <div class="my-component-content">
    <ng-content>
      <!-- content slot here -->
    </ng-content>
  </div>
</div>

И вы хотите использовать это как:

<my-component>
  <span class="my-component-header">  // <--- Look Here :) 
     <!-- this is optional --> 
    <p>html content here</p>
  </span>


  <p>blabla content</p>
  <!-- other html -->
</my-component>

Итак ... больше нет компонентов, которые не существуют, поэтому в этом нет проблем, нет ошибок, нет необходимости в CUSTOM_ELEMENTS_SCHEMA в app.module.ts

Так что если вы были похожи на меня и не хотели добавлять CUSTOM_ELEMENTS_SCHEMA в модуль - использование вашего компонента таким способом не приводит к ошибкам и является более понятным.

Для получения дополнительной информации об этой проблеме - https://github.com/angular/angular/issues/11251

Для получения дополнительной информации о проекции углового контента - https://blog.angular-university.io/angular-ng-content/

Вы также можете увидеть https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Я хотел бы добавить еще одну информацию, поскольку принятый ответ не полностью исправил мои ошибки.

В моем сценарии у меня есть родительский компонент, который содержит дочерний компонент. И этот дочерний компонент также содержит другой компонент.

Итак, файл спецификации моего родительского компонента должен иметь объявление дочернего компонента, КАК ХОРОШО, КАК КОМПОНЕНТ РЕБЕНКА CHILD. Это наконец решило проблему для меня.

Я думаю, что вы используете пользовательский модуль. Вы можете попробовать следующее. Вам необходимо добавить следующее в файл your-module.module.ts :

import { GridModule } from '@progress/kendo-angular-grid';
@NgModule({
  declarations: [ ],
  imports: [ CommonModule, GridModule ],
  exports: [ ],
})

Это не сработало для меня (используя 2.0.0). То, что работало для меня, было импортировать RouterTestingModule вместо этого.

Я решил это, импортировав RouterTestingModule в spec-файл.

import {
    RouterTestingModule
} from '@angular/router/testing';

  beforeEach(() => {

        TestBed.configureTestingModule({
            providers: [
                App,
                AppState,
                Renderer,
                {provide: Router,  useClass: MockRouter }
            ],
            imports: [ RouterTestingModule ]
        });

    });

Для меня мне нужно было посмотреть на:

1. If 'cl-header' is an Angular component, then verify that it is part of this module.

Это означает, что ваш компонент не включен в app.module.ts. Убедитесь, что он импортирован, а затем включен в declarationsраздел.

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

import { BrowserModule } from '@angular/platform-browser';

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

import { UtilModule } from "./modules/util_modules/util.module";
import { RoutingModule } from "./modules/routing_modules/routing.module";

import { HeaderComponent } from "./app/components/header.component";

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AppComponent,
        HeaderComponent
    ],
    imports: [BrowserModule, UtilModule, RoutingModule]
})
export class AppModule { }

Я просто импортировал, ClarityModuleи это решило все проблемы. Попробуйте!

import { ClarityModule } from 'clarity-angular';

Также включите модуль в импорт.

imports: [ ClarityModule ],

решил эту проблему в файле /app/app.module.ts

импортировать ваш компонент и объявить его

import { MyComponent } from './home-about-me/my.component';

@NgModule({
  declarations: [
    MyComponent,
  ]

Вы использовали веб-пакет ... если да, пожалуйста, установите

angular2-template-loader

и положи

test: /\.ts$/,
   loaders: ['awesome-typescript-loader', 'angular2-template-loader']