まだエラーを表示している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 { }
HeaderModuleをインポートするutilモジュールというラッパーモジュールを作成しました。
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時間をこのバージョンへのアップグレードに費やしています...)
ちょっとこれはすることによって修正されます
a)すべてのコンポーネントにschemas: [ CUSTOM_ELEMENTS_SCHEMA ]
を追加する
b)追加
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
そして
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
あなたのモジュールに。
乾杯、ラファエル
もう少しこれを追加したいと思いました。
新しいAngular 2.0.0の最終リリース(2016年9月14日)では、カスタムHTMLタグを使用すると、Template parse errors
と報告されます。カスタムタグは、HTMLで使用するタグで、 これらのタグ のいずれでもありません。
カスタムHTMLタグを使用している各コンポーネントにschemas: [ CUSTOM_ELEMENTS_SCHEMA ]
行を追加する必要があるようです。
EDIT: schemas
宣言は@NgModule
デコレータに含まれる必要があります。次の例は、カスタムコンポーネントCustomComponent
を持つカスタムモジュールを示しています。これにより、その1つのコンポーネントの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>
カスタム要素を持つコンポーネントをテストしている場合、これは単体テストの実行時にも発生する可能性があります。その場合、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();
}));
@NgModule({})
in 'app.module.ts'の下に以下を追加します。
import CUSTOM_ELEMENTS_SCHEMA from `@angular/core`;
その後
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
あなたの 'app.module.ts'はこのようになっているはずです。
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
declarations: [],
imports: [],
schemas: [ CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
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<app-logout>
を使用したいモジュールにAccountModule
をインポートする 'util.module'から{AccountModule}をインポートします。
@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に追加されません。
それは私にとってもうまくいきませんでした。私が変更され
CUSTOM_ELEMENTS_SCHEMA
for
NO_ERRORS_SCHEMA
これはこの記事で提案されていました: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content
今それは働きます。
ただこの記事を読んで、角度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に追加したら、万が一誰かがこの問題に遭遇した場合に備えて、あなたが使用する新しいカスタム要素がその名前に 'ダッシュ'を含むことを確認してください。など.
これはかなり長い記事であり、問題のより詳細な説明を与えます。
問題は(私の場合)/あなたが持っているときに来ます マルチスロットコンテンツプロジェクション
詳しくは コンテンツの投影 をご覧ください。
たとえば、次のようなコンポーネントがあるとします。
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-contentへの単なる参照です:
そして最も簡単な修正は追加です。
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>
つまり、存在しないコンポーネントはもうありません。そのため、app.module.tsにCUSTOM_ELEMENTS_SCHEMAがなくても、エラーも、問題もありません。
あなたが私のようで、モジュールにCUSTOM_ELEMENTS_SCHEMAを追加したくない場合は、この方法でコンポーネントを使用してもエラーは発生せず、より明確になります。
この問題の詳細については - https://github.com/angular/angular /issues/1251
Angularコンテンツ投影の詳細については、 - https://blog.angular-university.io/angular-ng-content/ を参照してください。
あなたはまた見ることができます https://scotch.io/tutorials/angular-2-transclusion-using-ng-content
上記の一般的な回答ではエラーが完全に解決されなかったため、情報をもう1つ追加します。
私のシナリオでは、子コンポーネントを保持する親コンポーネントがあります。そしてその子コンポーネントには別のコンポーネントも含まれています。
したがって、私の親コンポーネントのspecファイルには、子コンポーネントの宣言を「子どもの子コンポーネント」として含める必要があります。これでようやく問題が解決しました。
私にとって、私は見ておく必要がありました:
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 { }
それは私にとってはうまくいきませんでした(2.0.0を使って)。私にとってうまくいったのは、代わりにRouterTestingModuleをインポートすることでした。
私はspecファイルにRouterTestingModuleをインポートすることでこれを解決しました。
import {
RouterTestingModule
} from '@angular/router/testing';
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
App,
AppState,
Renderer,
{provide: Router, useClass: MockRouter }
],
imports: [ RouterTestingModule ]
});
});
Angularマテリアルを含むコンポーネントでは、ユニットテストで同様のエラーが発生しました。上記の@Dan Stirling-Talbertの回答に従って、これをコンポーネントの.specファイルに追加し、ユニットテストからエラーをクリアしました。
Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
次に、生成されたbeforeEach()ステートメントにスキーマを追加します。
beforeEach(asyn(() => {
declarations: [ AboutComponent ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
.compileComponents();
}));
私のKarmaエラーは:「mat-panel-title」がWebコンポーネントの場合、「CUSTOM_ELEMENTS_SCHEMA」をこのコンポーネントの「@ NgModule.schemas」に追加して、このメッセージを抑制します。