NgModule.schemas'a CUSTOM_ELEMENTS_SCHEMA eklendi ve hala Hata gösteriyor

Angular 2 rc4'ten rc6'ya geçtim ve bunu yaparken sorun yaşıyorum.

Konsolumda aşağıdaki hatayı görüyorum:

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

İşte Üstbilgi Bileşenim:

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

İşte Header Modülüm:

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

HeaderModule ithal util modülü adlı bir sarmalayıcı modülü oluşturdum:

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

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

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

Sonunda AppModule tarafından içe aktarılıyor:

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

Anladığım kadarıyla, hatayı basmak için SCHEMA'yı kullanarak hata mesajının talimatlarını takip ediyorum. Ama işe yaramıyor gibi görünüyor. Neyi yanlış yapıyorum? (Umarım şu anda göremediğim hiçbir şey açık değildir. Son 6 saatini bu sürüme geçirerek geçiriyorum ...)

Sadece biraz daha eklemek istedim.

Yeni açısal 2.0.0 son sürümüyle (14 Eylül 2016), özel html etiketleri kullanırsanız, bunu bildirir Template parse errors. Özel etiket, HTML'nizde kullandığınız ve bu etiketlerden biri olmayan bir etikettir .

schemas: [ CUSTOM_ELEMENTS_SCHEMA ]Özel HTML etiketleri kullandığınız her bileşene satırın eklenmesi gerektiği anlaşılıyor.

DÜZENLEME:schemas bildirgenin olması gerekiyor @NgModuledekoratör. Aşağıdaki örnek, bir bileşen CustomComponentiçin html şablonunda herhangi bir html etiketine izin veren özel bir bileşene sahip özel bir modülü göstermektedir .

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

Burada istediğiniz herhangi bir HTML etiketini kullanabilirsiniz.

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

Bu sorun giderildi:

a) schemas: [ CUSTOM_ELEMENTS_SCHEMA ]her bileşene ekleme veya

b) ekleme

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

ve

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

modülüne bağlayın.

Bu, özel öğeler içeren bir bileşeni test ediyorsanız birim testleri çalıştırırken de ortaya çıkabilir. Bu durumda, custom_elements_schema öğesinin, bu bileşenin .spec.ts dosyasının başında kurulumunu alan testingModule'a eklenmesi gerekir. Header.component.spec.ts kurulumunun nasıl başlayacağına dair bir örnek:

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();
  }));

Aşağıdakileri @NgModule({})'app.module.ts' altına ekleyin :

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;

ve sonra

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

'App.module.ts' ifadeniz şöyle görünmelidir:

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

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

export class AppModule { }

Benim için de işe yaramadı. Değiştim

CUSTOM_ELEMENTS_SCHEMA

için

NO_ERRORS_SCHEMA

Bu makalede önerilen: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Şimdi çalışıyor.

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 Dışa aktarılması gerekiyor

dashboard.module.ts
import AccountModulemodülünde<app-logout> 'util.module' öğesinden import {AccountModule} dosyasını kullanmak istediğimizde import;

@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() {}
}

İçe aktarma ve kullanma zorunluluğum yok CUSTOM_ELEMENTS_SCHEMA.
ancak dashboard.module tembel yüklendiğinde çalışmıyor. Tembel yükleme durumunda
kullanıldığında CUSTOM_ELEMENTS_SCHEMAhata bastırılır ancak bileşen dom'a eklenmez.

Açısal Malzeme içeren bileşenlerde, birim testlerimde benzer bir hata ortaya çıktı. @Dan Stirling-Talbert'in cevabına göre, bunu bileşen .spec dosyasına ekledim ve hata birim testlerimden silindi.

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

Ardından, oluşturulan beforeEach () deyiminde şemayı ekleyin:

beforeEach(asyn(() => {
    declarations: [ AboutComponent ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
.compileComponents();
}));

Karma hatam şuydu: 'mat-panel-title' bir Web Bileşeni ise, bu iletiyi bastırmak için bu bileşenin '@ NgModule.schemas' öğesine 'CUSTOM_ELEMENTS_SCHEMA' ekleyin.

Sadece bu yazıyı okuyun ve açısal 2 dokümana göre:

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.

Bu nedenle, herhangi birinin bu sorunla karşılaşması durumunda, NgModule'nize CUSTOM_ELEMENTS_SCHEMA ekledikten sonra, kullandığınız yeni özel öğelerin adında bir 'tire' bulunduğundan emin olun. vb.

Bu oldukça uzun bir yazı ve sorunun daha ayrıntılı bir açıklamasını veriyor.

Sorun (benim durumumda), Çok Yuvalı İçerik Projeksiyonu olduğunda ortaya çıkar

Daha fazla bilgi için içerik projeksiyonuna da bakın .

Örneğin, şuna benzeyen bir bileşeniniz varsa:

html dosyası:

 <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 dosyası:

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss'],
})
export class MyComponent {    
}

Ve şu şekilde kullanmak istiyorsunuz:

<my-component>
  <my-component-header>
    <!-- this is optional --> 
    <p>html content here</p>
  </my-component-header>


  <p>blabla content</p>
  <!-- other html -->
</my-component>

Ve sonra bilinen bir Açısal bileşen olmayan şablon ayrıştırma hataları alıyorsunuz ve aslında öyle değil - bu sadece bileşeninizdeki bir ng içeriğine referanstır:

Ve sonra en basit düzeltme

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

... uygulamanıza.module.ts

Ancak bu soruna kolay ve temiz bir yaklaşım <my-component-header>var - oradaki yuvaya html eklemek için kullanmak yerine - bu görev için aşağıdaki gibi bir sınıf adı kullanabilirsiniz:

html dosyası:

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

Ve şu şekilde kullanmak istiyorsunuz:

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

Yani ... artık mevcut olmayan bileşen yok, bu yüzden sorun yok, hata yok, app.module.ts dosyasında CUSTOM_ELEMENTS_SCHEMA'ya gerek yok

Eğer benim gibi olsaydınız ve modüle CUSTOM_ELEMENTS_SCHEMA eklemek istemediyseniz - bileşeninizi bu şekilde kullanmak hata oluşturmaz ve daha açıktır.

Bu sorun hakkında daha fazla bilgi için - https://github.com/angular/angular/issues/11251

Açısal içerik projeksiyonu hakkında daha fazla bilgi için - https://blog.angular-university.io/angular-ng-content/

Ayrıca https://scotch.io/tutorials/angular-2-transclusion-using-ng-content adresini de görebilirsiniz.

Yukarıdaki kabul edilen cevap hatalarımı tam olarak çözmediği için bir bilgi daha eklemek istiyorum.

Benim senaryomda, bir alt bileşen tutan bir üst bileşen var. Ve bu alt bileşen başka bir bileşen içeriyor.

Bu nedenle, ana bileşenimin spec dosyasının, çocuk bileşeninin bildirimine sahip olması gerekir; Sonunda bu benim için sorunu düzeltti.

Bence özel bir modül kullanıyorsunuz. Aşağıdakileri deneyebilirsiniz. Module -module.ts dosyasına aşağıdakileri eklemeniz gerekir :

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

Bu benim için işe yaramadı (2.0.0 kullanarak). Benim için işe yarayan bunun yerine RouterTestingModule'u içe aktarmaktı.

Bu spec dosyasında RouterTestingModule alarak.

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

  beforeEach(() => {

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

    });

Benim için bakmam gerekiyordu:

1. If 'cl-header' is an Angular component, then verify that it is part of this module.

Bu, bileşeninizin app.module.ts. İçe aktarıldığından ve daha sonra declarationsbölüme dahil edildiğinden emin olun .

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

Sadece ithal ettim ClarityModuleve tüm sorunları çözdüm. Bir şans ver!

import { ClarityModule } from 'clarity-angular';

Ayrıca, modülü içe aktarmalara dahil edin.

imports: [ ClarityModule ],

/app/app.module.ts dosyasında bu sorunu çözdü

bileşeninizi içe aktarın ve beyan edin

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

@NgModule({
  declarations: [
    MyComponent,
  ]

Web paketini kullandınız mı? Evet ise lütfen kurun

angular2-template-loader

ve koy

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