CUSTOM_ELEMENTS_SCHEMA додано до NgModule.schemas, як і раніше відображається помилка

Я щойно перейшов з кутового 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, який імпортує 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 годин на оновлення до цієї версії ...)

Просто хотілося додати трохи більше цього.

Якщо ви використовуєте новий кутовий 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 потрібно додати до тестувального модуля, який встановлюється на початку файлу .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

dashboard.module.ts
імпортувати AccountModuleв модуль, де ми хочемо використовувати<app-logout> імпорт {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>

І тоді ви отримуєте помилки розбору шаблонів, які не є відомим кутовим компонентом, і фактично це не так - це лише посилання на вміст 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/isissue/11251

Для отримання додаткової інформації про кутову проекцію вмісту - https://blog.angular-university.io/angular-ng-content/

Ви також можете побачити https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

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

У моєму сценарії у мене є батьківський компонент, який містить дочірній компонент. І цей дочірній компонент містить і інший компонент.

Отже, у специфікаційному файлі мого батьківського компонента необхідно мати декларацію дочірнього компонента, ЯКЩО БУДЕ ЯК ДІТЕЙ КОМПОНЕНТ ДЕТІВ. Це остаточно вирішило для мене це питання.

Я думаю, ви використовуєте спеціальний модуль. Можна спробувати наступне. У файл your-module.module.ts потрібно додати наступне :

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

Це не спрацювало для мене (використовуючи 2.0.0). Що для мене працювало, то натомість імпортував RouterTestingModule.

Я вирішив це, імпортуючи RouterTestingModule у специфікаційний файл.

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']