NgModule.schemasに追加されたCUSTOM_ELEMENTS_SCHEMAはまだエラーを示しています

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 moduleというラッパーモジュールを作成しました。

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時間を費やしています...）

これについてもう少し追加したかっただけです。

新しいAngular 2.0.0最終リリース（2016年9月14日）では、カスタムHTMLタグを使用すると、それが報告されTemplate parse errorsます。カスタムタグは、HTMLで使用するタグで、これらのタグのいずれでもありません。

この行schemas: [ CUSTOM_ELEMENTS_SCHEMA ]は、カスタムHTMLタグを使用している各コンポーネントに追加する必要があるようです。

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>

これは以下によって修正されます：

a）schemas: [ CUSTOM_ELEMENTS_SCHEMA ]すべてのコンポーネントに追加する、または

b）追加

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

そして

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

あなたのモジュールに。

これは、カスタム要素を使用してコンポーネントをテストする場合に、単体テストを実行するときにも発生する可能性があります。その場合、custom_elements_schemaは、そのコンポーネントの.spec.tsファイルの先頭でセットアップされるtestingModuleに追加する必要があります。以下は、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({})「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 { }

それも私にはうまくいきませんでした。私が変更され

CUSTOM_ELEMENTS_SCHEMA

ために

NO_ERRORS_SCHEMA

これはこの記事で提案されました：https : //scotch.io/tutorials/angular-2-transclusion-using-ng-content

今では動作します。

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は、
インポートAccountModule、我々が使用するモジュールに<app-logout> 「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に追加されません。

Angular Materialを含むコンポーネントを使用すると、単体テストで同様のエラーが発生しました。上記の@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コンポーネントの場合、このコンポーネントの「@ NgModule.schemas」に「CUSTOM_ELEMENTS_SCHEMA」を追加して、このメッセージを抑制します。

この投稿を読んで、angular 2 docsに従ってください：

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

Angularコンテンツプロジェクションの詳細-https ://blog.angular-university.io/angular-ng-content/

https://scotch.io/tutorials/angular-2-transclusion-using-ng-contentもご覧ください。

上記の承認された回答ではエラーが完全に修正されなかったため、もう1つ情報を追加したいと思います。

私のシナリオでは、子コンポーネントを保持する親コンポーネントがあります。また、その子コンポーネントには別のコンポーネントも含まれています。

したがって、私の親コンポーネントのスペックファイルには、子コンポーネントの宣言と同様に、子コンポーネントの宣言が必要です。これでようやく問題が解決しました。

カスタムモジュールを使用していると思います。以下を試すことができます。your-module.module.tsファイルに以下を追加する必要があります。

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

それは私にとってはうまくいきませんでした（2.0.0を使用）。私にとってうまくいったのは、代わりにRouterTestingModuleをインポートすることでした。

これを解決するには、RouterTestingModuleをスペックファイルにインポートします。

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

  beforeEach(() => {

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

    });

私にとって、私は見る必要がありました：

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

私はちょうど輸入しClarityModule、それはすべての問題を解決しました。試してみる！

import { ClarityModule } from 'clarity-angular';

また、インポートにモジュールを含めます。

imports: [ ClarityModule ],

/app/app.module.tsファイルでこの問題を解決しました

コンポーネントをインポートして宣言する

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

@NgModule({
  declarations: [
    MyComponent,
  ]

Webpackを使用しましたか？はいの場合はインストールしてください

angular2-template-loader

それを置く

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