[解決済み] NgModule.schemasにCUSTOM_ELEMENTS_SCHEMAを追加してもエラーが表示される。
2022-04-20 03:49:02
質問
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
これが私のHeader Componentです。
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... }
これが私のHeaderモジュールです。
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の「コンポーネント」は既知の要素ではありません。
-
Angularインタビュー質問まとめ1~基礎知識(Angular v8+)編
-
[解決済み] formGroup' は 'form' の既知のプロパティではないため、バインドできません。
-
[解決済み] Angular 2+でngShowとngHideに相当するものは何ですか?
-
[解決済み] 現在のルートを取得する方法
-
[解決済み] ExpressionChangedAfterItHasBeenCheckedErrorの説明
-
[解決済み] angular2 tslintの警告を止めるためにコンポーネントのデフォルトプレフィックスを変更する方法
-
[解決済み] @angular/material/index.d.ts' はモジュールではありません。
-
[解決済み] VSCodeでAngularをデバッグする方法とは?
-
[解決済み] Angular 2 - モデル変更後、ビューが更新されない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angularで@Input()の値が変更されたときに検出する方法は?
-
[解決済み] コンポーネントテンプレートで要素を選択するには?
-
[解決済み] テンプレート駆動型とリアクティブ型の実用的な違いとは?
-
[解決済み] Angular 2のパッシブリンク - <a href="">相当
-
[解決済み] viewchildを使用して複数のviewchildrenにアクセスする
-
[解決済み] Angular HttpClient "パース中のHttp失敗"
-
[解決済み] エラーが発生しました。出力が初期化されていません
-
[解決済み] Angular 2+ - ベースのhrefを動的に設定する
-
[解決済み] Angular Compiler は TypeScript >=3.4.0 と <3.5.0 を要求しているが、代わりに 3.5.3 が検出された
-
[解決済み] ジョブ名「...getProjectMetadata」は存在しません。