Właśnie zaktualizowałem Angular 2 rc4 do rc6 i mam z tym problemy.
Widzę następujący błąd na mojej konsoli:
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
Oto mój składnik nagłówka:
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... }
Oto mój moduł nagłówkowy:
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 { }
Utworzyłem moduł opakowujący o nazwie util module, który importuje HeaderModule:
import { NgModule } from '@angular/core';
import {HeaderModule} from "./header/header.module";
// ...
@NgModule({
declarations: [ ],
bootstrap: [ ],
imports: [ HeaderModule]
})
export class UtilModule { }
Który jest ostatecznie importowany przez 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 { }
Zgodnie z moim zrozumieniem postępuję zgodnie z instrukcjami komunikatu o błędzie, używając SCHEMATU do usunięcia błędu. Ale wydaje się, że nie działa. Co ja robię źle? (Mam nadzieję, że to nic oczywistego, po prostu nie widzę w tej chwili. Spędziłem ostatnie 6 godzin na uaktualnianiu do tej wersji ...)
angular
karma-jasmine
Raphael Hippe
źródło
źródło
AppModule
, czy nadal musisz dodać go do swojego komponentu?Odpowiedzi:
Chciałem tylko dodać trochę więcej na ten temat.
W nowej ostatecznej wersji kątowej 2.0.0 (14 września 2016 r.), Jeśli użyjesz niestandardowych tagów HTML, zgłosi to
Template parse errors
. Tag niestandardowy to tag używany w kodzie HTML, który nie jest jednym z tych tagów .Wygląda na to, że wiersz
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
należy dodać do każdego komponentu, w którym używasz niestandardowych tagów HTML.EDIT:
schemas
deklaracja musi być w@NgModule
dekoratora. Poniższy przykład pokazuje niestandardowy moduł z niestandardowym komponentem,CustomComponent
który zezwala na dowolny tag html w szablonie HTML dla tego jednego komponentu.custom.module.ts
custom.component.ts
custom.component.html
Tutaj możesz użyć dowolnego tagu HTML, który chcesz.
źródło
CUSTOM_ELEMENTS_SCHEMA
do mojego fałszywego modułu testów jednostkowych. Jak tylko to zrobiłem, przestało narzekać.CUSTOM_ELEMENTS_SCHEMA
może prowadzić do błędów, które są trudne do znalezienia, ale chciałbym używać niestandardowych nazw elementów dlang-content
sekcji w moich kontrolkach bez tych konkretnych nazw elementów powodujących błędy i bez tworzenia dla nich komponentów, które byłyby po prostu ng-content ...schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
musi zostać dodany do każdego komponentu, w którym używasz tagów HTML ? Wygląda na to, żeComponent
dekorator nie akceptujeschemas
parametru.Component
dekoratora, znajduje się wNgModule
dekoratorze. Będziesz musiał utworzyć moduł dla tego komponentu, a następnie możesz określić tam schemat. Link do dokumentów i przykład.Jest to naprawiane przez:
a) dodanie
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
do każdego elementu lubb) dodawanie
i
do swojego modułu.
źródło
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
Może się to również pojawić podczas uruchamiania testów jednostkowych, jeśli testujesz komponent z elementami niestandardowymi. W takim przypadku custom_elements_schema musi zostać dodany do testingModule, który jest konfigurowany na początku pliku .spec.ts dla tego komponentu. Oto przykład, jak powinna rozpocząć się instalacja header.component.spec.ts:
źródło
Dodaj następujące elementy
@NgModule({})
w „app.module.ts”:i wtedy
Twój „app.module.ts” powinien wyglądać następująco:
źródło
Na mnie też się nie udało. Zmieniłam
dla
co zostało zasugerowane w tym artykule: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content
Teraz działa.
źródło
CUSTOM_ELEMENTS_SCHEMA
nie pomogło, aleNO_ERRORS_SCHEMA
załatwiło sprawę i całe zagnieżdżanie samodzielnych elementów kątowych działa teraz jak urokTestBed
. Element działał poprawnie, ale test zakończył się niepowodzeniem. Dodanoschemas: [NO_ERRORS_SCHEMA]
i wszystko jest w porządku.util.component.ts
util.module.ts
LogoutComponent Musi zostać wyeksportowany
dashboard.module.ts
import
AccountModule
w module, w którym chcemy użyć<app-logout>
importu {AccountModule} z 'util.module';dashboard.component.ts
Nie mam obowiązku importowania i używania
CUSTOM_ELEMENTS_SCHEMA
.jednak nie działa, gdy moduł dashboard.module jest ładowany z opóźnieniem.
Podczas korzystania
CUSTOM_ELEMENTS_SCHEMA
z leniwego ładowania błąd jest pomijany, ale komponent nie jest dodawany do domeny.źródło
W przypadku komponentów zawierających materiał kątowy podobny błąd wystąpił w moich testach jednostkowych. Zgodnie z powyższą odpowiedzią @Dan Stirling-Talbert, dodałem to do mojego pliku .spec komponentu, a błąd został usunięty z moich testów jednostkowych.
Następnie dodaj schemat w wygenerowanej instrukcji beforeEach ():
Mój błąd Karmy brzmiał: Jeśli „mat-panel-title” jest składnikiem sieciowym, dodaj „CUSTOM_ELEMENTS_SCHEMA” do „@ NgModule.schemas” tego komponentu, aby ukryć ten komunikat.
źródło
Po prostu przeczytaj ten post i zgodnie z kątowymi 2 dokumentami:
Tak więc na wypadek, gdyby ktoś napotkał ten problem, po dodaniu CUSTOM_ELEMENTS_SCHEMA do NgModule upewnij się, że każdy nowy niestandardowy element, którego używasz, ma w nazwie `` myślnik '', np. lub itp.
źródło
Jest to dość długi post i zawiera bardziej szczegółowe wyjaśnienie problemu.
Problem (w moim przypadku) pojawia się, gdy masz projekcję treści na wiele slotów
Zobacz także projekcję treści, aby uzyskać więcej informacji.
Na przykład, jeśli masz komponent, który wygląda tak:
plik html:
plik ts:
I chcesz go używać tak, jak:
Następnie otrzymujesz błędy parsowania szablonu, które nie są znanym komponentem Angulara i tak naprawdę nie jest - to tylko odniesienie do zawartości ng w twoim komponencie:
A potem najprostszą poprawką jest dodanie
... do twojego app.module.ts
Ale jest proste i przejrzyste podejście do tego problemu - zamiast
<my-component-header>
wstawiać html w tym slocie - możesz użyć nazwy klasy do tego zadania w następujący sposób:plik html:
I chcesz go używać tak, jak:
Więc ... koniec z nieistniejącymi komponentami, więc nie ma w tym żadnych problemów, żadnych błędów, nie ma potrzeby CUSTOM_ELEMENTS_SCHEMA w app.module.ts
Czyli gdybyś był taki jak ja i nie chciałeś dodawać CUSTOM_ELEMENTS_SCHEMA do modułu - użycie twojego komponentu w ten sposób nie generuje błędów i jest bardziej przejrzyste.
Więcej informacji na temat tego problemu - https://github.com/angular/angular/issues/11251
Więcej informacji na temat projekcji treści w Angular - https://blog.angular-university.io/angular-ng-content/
Możesz również zobaczyć https://scotch.io/tutorials/angular-2-transclusion-using-ng-content
źródło
Chciałbym dodać jedną dodatkową informację, ponieważ powyższa zaakceptowana odpowiedź nie naprawiła całkowicie moich błędów.
W moim scenariuszu mam komponent nadrzędny, który przechowuje komponent podrzędny. Ten składnik potomny zawiera również inny składnik.
Tak więc plik specyfikacji mojego komponentu nadrzędnego musi mieć deklarację komponentu podrzędnego, RÓWNIEŻ JAKIEGO KOMPONENTU DZIECIĘCEGO. To ostatecznie rozwiązało problem.
źródło
Myślę, że używasz niestandardowego modułu. Możesz spróbować następujących rzeczy. Musisz dodać następujące elementy do pliku your-module.module.ts :
źródło
To nie zadziałało dla mnie (używając 2.0.0). Udało mi się zamiast tego zaimportować RouterTestingModule.
Rozwiązałem to, importując RouterTestingModule w pliku spec.
źródło
Dla mnie musiałem spojrzeć na:
1. If 'cl-header' is an Angular component, then verify that it is part of this module.
Oznacza to, że Twój składnik nie jest uwzględniony w
app.module.ts
. Upewnij się, że został zaimportowany, a następnie uwzględniony wdeclarations
sekcji.źródło
Właśnie zaimportowałem
ClarityModule
i rozwiązałem wszystkie problemy. Spróbuj!Dołącz także moduł do importu.
imports: [ ClarityModule ],
źródło
CUSTOM_ELEMENTS_SCHEMA
, na angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA, zobaczymy, że CUSTOM_ELEMENTS_SCHEMA pozwala NgModule na zawarcie elementów innych niż kątowe z myślnikiem (-) {podobnie do tego scenariusza}. Moduł jasności po zaimportowaniu zawiera domyślnie wszystkie ikony clr, itp. Możemy również korzystać z innych funkcji modułu przejrzystości.clr-header
. Ten sam błąd pojawia się w przypadkuclr-icon
innych. Jak wspomniałem w moim poprzednim komentarzu, moduł Clarity zawiera je domyślnie. Mam nadzieję, że odpowiedział na twoje pytanie.rozwiązał ten problem w pliku /app/app.module.ts
zaimportuj swój komponent i zadeklaruj go
źródło
Czy korzystałeś z pakietu internetowego ... Jeśli tak, zainstaluj
i włóż to
źródło