Пользовательские элементы схемы добавлены в NgModule.схемы все еще показывают ошибку

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

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

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

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

таможни.модуль.ТС

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 {}

таможни.деталь.ТС

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

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

таможни.деталь.HTML-код

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

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

это работает для меня таким образом:

в "приложение.модуль.ТС" :

1-

import CUSTOM_ELEMENTS_SCHEMA from `@angular/core` file ;

2 - Добавить

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

до @NgModule({})

--------------------------------------------------------->

"приложения.модуль.ts " будет выглядеть так:

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

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

экспортировать класс модуль { }

Это также может возникнуть при выполнении модульных тестов, если вы тестируете компонент с пользовательскими элементами. В этом случае custom_elements_schema должен быть добавлен в testingModule, который получает setup в начале .спекуляция.TS файл для этого компонента. Вот пример того, как заголовок.деталь.спекуляция.настройка 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();
  }));

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

CUSTOM_ELEMENTS_SCHEMA

на

NO_ERRORS_SCHEMA

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

теперь все работает.

util.деталь.ТС

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

util.модуль.ТС

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

LogoutComponent должен быть экспортирован

панель управления.модуль.ТС
импорт AccountModule в модуле, где мы хотим использовать <app-logout> импорт { AccountModule } из ' util.модуль';

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

панель управления.деталь.ТС

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.
однако его не работает, когда приборная панель.модуль лениво загружен.
При использовании CUSTOM_ELEMENTS_SCHEMA в случае ленивой загрузки ошибка подавляется, но компонент не добавляется в dom.

просто прочитайте этот пост и в соответствии с угловыми 2 docs:

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>

ТС:

@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
],

... к вашему приложению.модуль.ТС

---

но есть простой и чистый подход к этой проблеме - вместо того, чтобы использовать <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 в приложении.модуль.ТС

Итак, если вы были похожи на меня и не хотели добавлять 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

Это не сработало для меня (используя 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. Убедитесь, что он импортирован, а затем включен в .

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 { }

вы использовали webpack... если да, пожалуйста, установите

angular2-template-loader

и положил

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