web-dev-qa-db-ja.com

まだエラーを表示している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時間をこのバージョンへのアップグレードに費やしています...）

angularkarma-jasmine
102
Raphael Hippe

ちょっとこれはすることによって修正されます

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

b）追加

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

そして

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

あなたのモジュールに。

乾杯、ラファエル

69
Raphael Hippe

もう少しこれを追加したいと思いました。

新しい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>
77
Caleb

カスタム要素を持つコンポーネントをテストしている場合、これは単体テストの実行時にも発生する可能性があります。その場合、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();
  }));
19
Dan Stirling-Talbert

@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 { }
11
Negin

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に追加されません。

7
Arun

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

CUSTOM_ELEMENTS_SCHEMA

for

NO_ERRORS_SCHEMA

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

今それは働きます。

7
Martin Cremer

ただこの記事を読んで、角度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に追加したら、万が一誰かがこの問題に遭遇した場合に備えて、あなたが使用する新しいカスタム要素がその名前に 'ダッシュ'を含むことを確認してください。など.

4
Hugo 1005

これはかなり長い記事であり、問​​題のより詳細な説明を与えます。

問題は（私の場合）/あなたが持っているときに来ます マルチスロットコンテンツプロジェクション

詳しくは コンテンツの投影 をご覧ください。

たとえば、次のようなコンポーネントがあるとします。

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

3
Combine

上記の一般的な回答ではエラーが完全に解決されなかったため、情報をもう1つ追加します。

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

したがって、私の親コンポーネントのspecファイルには、子コンポーネントの宣言を「子どもの子コンポーネント」として含める必要があります。これでようやく問題が解決しました。

1
ganders

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

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 { }
0
Denise Mauldin

それは私にとってはうまくいきませんでした（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 ]
        });

    });
0
HMagdy

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」に追加して、このメッセージを抑制します。

0
T. Bulford