Pregunta CUSTOM_ELEMENTS_SCHEMA agregado a NgModule.schemas sigue mostrando el error


Acabo de actualizar de Angular 2 rc4 a rc6 y tengo problemas para hacerlo.

Veo el siguiente error en mi consola:

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

Aquí está mi Componente de encabezado:

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

Aquí está mi módulo de encabezado:

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

Creé un módulo envoltorio llamado módulo util que importa el HeaderModule:

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

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

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

Que finalmente es importado por el 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 { }

A mi entender, estoy siguiendo las instrucciones del mensaje de error utilizando SCHEMA para eliminar el error. Pero parece que no funciona. ¿Qué estoy haciendo mal? (Espero que no sea nada obvio, simplemente no lo veo en este momento. Pasé las últimas 6 horas actualizando a esta versión ...)


75
2017-09-10 16:22


origen


Respuestas:


Solo quería agregar un poco más sobre esto.

Con la nueva versión final angular 2.0.0 (14 de septiembre de 2016), si usa etiquetas html personalizadas, informará que Template parse errors. Una etiqueta personalizada es una etiqueta que utiliza en su HTML que no es una de estas etiquetas.

Parece que la línea schemas: [ CUSTOM_ELEMENTS_SCHEMA ] debe agregarse a cada componente en el que utilice etiquetas HTML personalizadas.

EDITAR: los schemas declaración debe estar en una @NgModule decorador. El siguiente ejemplo muestra un módulo personalizado con un componente personalizado CustomComponent que permite cualquier etiqueta html en la plantilla html para ese componente.

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

Aquí puede usar cualquier etiqueta HTML que desee.

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

54
2017-09-18 03:16



Oye, esto se soluciona haciendo

a) agregar schemas: [ CUSTOM_ELEMENTS_SCHEMA ] a cada componente o

b) agregar

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

y

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

a tu módulo

Saludos, Raphael


48
2017-11-03 17:23



Funciona para mí de esta manera:

en "App.module.ts":

1-

import CUSTOM_ELEMENTS_SCHEMA from `@angular/core` file ;

2 - Agregar

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

al @NgModule({})

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

"app.module.ts" se verá así:

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

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

clase de exportación AppModule {}


11
2017-12-27 13:26



Tampoco funcionó para mí. Cambié

CUSTOM_ELEMENTS_SCHEMA

para

NO_ERRORS_SCHEMA

que fue sugerido en este artículo: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Ahora funciona.


6
2017-11-16 16:43



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 necesita ser exportado

dashboard.module.ts
 importar AccountModule en el módulo donde queremos usar <app-logout>     importar {AccountModule} desde '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() {}
}

No estoy obligado a importar y usar CUSTOM_ELEMENTS_SCHEMA.
sin embargo, no funciona cuando dashboard.module está cargado de forma diferida.
Cuando usas CUSTOM_ELEMENTS_SCHEMA en caso de carga diferida, se suprime el error pero el componente no se agrega a dom.


5
2018-01-06 11:22



Esto también puede aparecer cuando se ejecutan pruebas unitarias si está probando un componente con elementos personalizados. En ese caso, se debe agregar custom_elements_schema al testingModule que se configura al principio del archivo .spec.ts para ese componente. Aquí hay un ejemplo de cómo comenzaría la configuración de 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();
  }));

4
2018-04-17 22:35



Acabo de leer esta publicación y de acuerdo con los 2 documentos angulares:

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.

Entonces, en caso de que alguien se encuentre con este problema, una vez que haya agregado CUSTOM_ELEMENTS_SCHEMA a su NgModule, asegúrese de que cualquier nuevo elemento personalizado que use tenga un "guion" en su nombre, por ejemplo. o etc.


2
2018-02-03 08:04



Me gustaría agregar una información adicional ya que la respuesta aceptada anteriormente no solucionó mis errores por completo.

En mi caso, tengo un componente principal, que contiene un componente secundario. Y ese componente hijo también contiene otro componente.

Por lo tanto, el archivo de especificaciones de mi componente principal debe tener la declaración del componente secundario, ASÍ COMO EL COMPONENTE INFANTIL DEL NIÑO. Eso finalmente solucionó el problema para mí.


0
2017-10-12 14:14



Eso no funcionó para mí (usando 2.0.0). Lo que funcionó para mí fue la importación de RouterTestingModule en su lugar.

Resolví esto importando RouterTestingModule en el archivo spec.

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

  beforeEach(() => {

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

    });

0
2017-11-13 18:22