Pertanyaan CUSTOM_ELEMENTS_SCHEMA ditambahkan ke NgModule.schemas masih menampilkan Error


Saya baru saja memutakhirkan dari Angular 2 rc4 ke rc6 dan mengalami masalah dalam melakukannya.

Saya melihat kesalahan berikut di konsol saya:

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

Berikut adalah Komponen Header saya:

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

Ini adalah Modul Header saya:

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

Saya membuat modul pembungkus yang disebut modul util yang mengimpor HeaderModule:

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

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

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

Yang akhirnya diimpor oleh 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 { }

Untuk pemahaman saya, saya mengikuti instruksi dari pesan kesalahan menggunakan SCHEMA untuk menekan kesalahan. Tapi sepertinya tidak berhasil. Apa yang saya lakukan salah? (Saya harap tidak ada yang jelas saya hanya tidak melihat pada saat ini. Telah menghabiskan 6 jam terakhir untuk meng-upgrade ke versi ini ...)


75
2017-09-10 16:22


asal


Jawaban:


Hanya ingin menambahkan sedikit lebih banyak tentang ini.

Dengan rilis akhir 2.0.0 sudut baru (sept 14, 2016), jika Anda menggunakan tag html khusus maka akan melaporkan itu Template parse errors. Tag ubahsuaian adalah tag yang Anda gunakan dalam HTML Anda yang bukan salah satunya tag ini.

Sepertinya garis schemas: [ CUSTOM_ELEMENTS_SCHEMA ] perlu ditambahkan ke setiap komponen tempat Anda menggunakan tag HTML khusus.

EDIT: Itu schemas deklarasi harus dalam @NgModule penghias. Contoh di bawah ini menunjukkan modul khusus dengan komponen khusus CustomComponent yang memungkinkan tag html di template html untuk satu komponen itu.

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

Di sini Anda dapat menggunakan tag HTML apa pun yang Anda inginkan.

<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



Hai ini diperbaiki dengan melakukan

a) menambahkan schemas: [ CUSTOM_ELEMENTS_SCHEMA ] ke setiap komponen atau

b) menambahkan

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

dan

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

ke modul Anda.

Ceria, Raphael


48
2017-11-03 17:23



Ia bekerja untuk saya dengan cara ini:

di "App.module.ts":

1-

import CUSTOM_ELEMENTS_SCHEMA from `@angular/core` file ;

2 - Tambahkan

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

ke @NgModule({})

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

"app.module.ts" akan terlihat seperti ini:

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

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

kelas ekspor AppModule {}


11
2017-12-27 13:26



Itu tidak berhasil untuk saya juga. aku berubah

CUSTOM_ELEMENTS_SCHEMA

untuk

NO_ERRORS_SCHEMA

yang disarankan dalam artikel ini: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Sekarang berhasil.


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 Perlu diekspor

dashboard.module.ts
 impor AccountModule dalam modul di mana kami ingin menggunakan <app-logout>     impor {AccountModule} dari '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() {}
}

Saya tidak perlu mengimpor dan menggunakan CUSTOM_ELEMENTS_SCHEMA.
namun tidak berfungsi ketika dashboard.module sedang dimuat.
Ketika menggunakan CUSTOM_ELEMENTS_SCHEMA dalam kasus pemuatan malas, kesalahan ditekan tetapi komponen tidak ditambahkan ke dom.


5
2018-01-06 11:22



Ini juga dapat muncul ketika menjalankan tes unit jika Anda menguji komponen dengan elemen kustom. Dalam hal ini, custom_elements_schema perlu ditambahkan ke testingModule yang mendapat pengaturan di awal file .spec.ts untuk komponen itu. Berikut ini contoh bagaimana pengaturan header.component.spec.ts akan dimulai:

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



Baca saja pos ini dan sesuai dengan 2 dokumen sudut:

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.

Jadi kalau-kalau ada yang mengalami masalah ini, setelah Anda menambahkan CUSTOM_ELEMENTS_SCHEMA ke NgModule Anda, pastikan bahwa elemen kustom baru apa pun yang Anda gunakan memiliki 'tanda hubung' dalam namanya misalnya. atau dll.


2
2018-02-03 08:04



Saya ingin menambahkan satu informasi tambahan karena jawaban yang diterima di atas tidak memperbaiki kesalahan saya sepenuhnya.

Dalam skenario saya, saya memiliki komponen induk, yang memegang komponen anak. Dan komponen anak itu juga mengandung komponen lain.

Jadi, file spesifikasi komponen induk harus memiliki deklarasi komponen anak, SERTA KOMPONEN ANAK ANAK. Itu akhirnya memperbaiki masalah itu untukku.


0
2017-10-12 14:14



Itu tidak bekerja untuk saya (menggunakan 2.0.0). Apa yang berhasil bagi saya adalah mengimpor RouterTestingModule sebagai gantinya.

Saya menyelesaikan ini dengan mengimpor RouterTestingModule dalam file spesifikasi.

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