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

Ответ 1

Эй это исправлено, делая

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

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

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

и

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

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

Приветствия, Рафаэль

Ответ 2

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

В новом выпуске angular 2.0.0 (sept 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>

Ответ 3

Он работает для меня следующим образом:

в "App.module.ts":

1-

import CUSTOM_ELEMENTS_SCHEMA from `@angular/core` file ;

2 - Добавить

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

в @NgModule({})

----------------------------------------------- ---------- >    < ------------------------------------------------ -------------

"app.module.ts" будет выглядеть так:

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

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

класс экспорта AppModule {}

Ответ 4

Это тоже не сработало. Я изменил

CUSTOM_ELEMENTS_SCHEMA

для

NO_ERRORS_SCHEMA

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

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

Ответ 5

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
   import AccountModule в модуле, где мы хотим использовать <app-logout>  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.

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

Это не сработало для меня (с использованием 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 ]
        });

    });

Ответ 9

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

angular2-template-loader

и поместите его

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