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

Question

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 часов я потратил на обновление до этой версии...)

211

angular karma-jasmine

Источник

user6817178 10 сен '16 в 16:22

21 ответ

Решение

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

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

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

РЕДАКТИРОВАТЬ: 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>

140

Источник

user5402432 18 сен '16 в 03:16

Это также может возникнуть при запуске модульных тестов, если вы тестируете компонент с пользовательскими элементами. В этом случае 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();
  }));

58

Источник

user4544619 17 апр '18 в 22:35

У меня это работает так:

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

31

Источник

user5611484 27 дек '16 в 13:26

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

CUSTOM_ELEMENTS_SCHEMA

за

NO_ERRORS_SCHEMA

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

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

14

Источник

user5155810 16 ноя '16 в 16:43

С компонентами, содержащими 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' этого компонента, чтобы подавить это сообщение.

12

Источник

user6031271 31 май '19 в 15:05

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.

11

Источник

user500415 06 янв '17 в 11:22

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

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

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

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

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

5

Источник

user2979938 01 окт '18 в 11:08

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

5

Источник

user7406016 03 фев '17 в 08:04

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

импортируйте свой компонент и объявите его

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

@NgModule({
  declarations: [
    MyComponent,
  ]

4

Источник

user11212275 28 июн '20 в 07:39

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

import { ClarityModule } from 'clarity-angular';

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

imports: [ ClarityModule ],

3

Источник

user9392463 30 мар '20 в 10:47

Отключение AOT и оптимизатора сборки по крайней мере заставляет его сборку:

      "buildOptimizer": false,
"aot": false,

2

Источник

user549372 24 авг '21 в 22:16

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

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

1

Источник

user12569619 20 дек '19 в 11:16

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

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

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

1

Источник

user1072081 12 окт '17 в 14:14

Использование CUSTOM_ELEMENT_SCHEMA приведет к компиляции кода, но не решит основную проблему и создаст головную боль в дальнейшем.

Обычно я получаю эту ошибку, когда отсутствует импорт модуля или пользовательский компонент не определен в разделе объявлений модуля, в котором он определен.

Проверьте импорт в своих модулях и убедитесь, что пользовательский компонент находится в разделе объявлений импортируемого модуля. Убедитесь, что вы импортируете модуль пользовательского компонента, если он не объявлен в модуле приложения.

Хотел проголосовать против и проголосовал за некоторые другие ответы, правильный ответ - между ответами Луиса и Вонга.

Убедитесь, что компонент находится в разделе объявлений (custom.module.ts).

      import { MyComponent } from './custom/my.component';

@NgModule({
  declarations: [
    MyComponent,
  ]

Убедитесь, что модуль импортирован (app.module.ts или другие модули, ссылающиеся на компонент):

      import { MyCustomModule } from '@custom/custom.module';
@NgModule({
  declarations: [ ],
  imports: [ CommonModule, MyCustomModule ],
  exports: [ ],
})

0

Источник

user1983091 14 июн '23 в 08:13

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

    });

0

Источник

user1665955 13 ноя '17 в 18:22

Другая причина, по которой вы можете получить эту ошибку, заключается в том, что вы загружаете Bootstrap дважды. т.е. сначала запустив npm install bootstrap, jquery, popper, а затем ТАКЖЕ добавив их путем копирования и вставки из CDN. (Просто сделайте одно или другое)

0

Источник

user2982122 26 сен '22 в 04:40

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

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

0

Источник

user579477 21 мар '18 в 20:50

Обязательно импортируйте компонент в массив объявлений

@NgModule({
  declarations: [ExampleComponent],
  imports: [
      CommonModule,
      ExampleRoutingModule,
      ReactiveFormsModule
  ]
})

-1

Источник

user7765768 18 авг '20 в 11:07

Была аналогичная проблема, но оказалось, что в имени компонента (имя селектора) была опечатка. Итак, Angular не смог импортировать модуль.

-1

Источник

user13547008 13 янв '22 в 13:25

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

angular2-template-loader

и положи

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

-2

Источник

user7185502 20 ноя '16 в 14:04

Другие вопросы по тегам angular karma-jasmine

user6817178 03 ноя '16 в 17:23 2016-11-03 17:23 · Accepted Answer · 2016-11-03 17:23

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

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

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

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

а также

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

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

Ура, Рафаэль

170

Источник

user6817178 03 ноя '16 в 17:23