クリーンなionic4プロジェクト(ionic start --type=angular
およびテンプレートブランクを使用)から始めて、複数のページで使用できるカスタム角度コンポーネントを作成しようとしています。
ただし、homepage.htmlでionic generate component
生成されたコンポーネントテストを挿入して使用しようとすると<app-test></app-test>
、次のエラーが発生します。
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-test'は既知の要素ではありません:1。'app-test 'がAngularコンポーネントの場合、それがこのモジュールの一部であることを確認します。2.「app-test」がWebコンポーネントの場合、このメッセージを抑制するために、このコンポーネントの「@ NgModule.schemas」に「CUSTOM_ELEMENTS_SCHEMA」を追加します。( "=" _ blank "rel =" noopener "href =" https://ionicframework.com/docs ">ドキュメントがガイドになります。
エラーエラー:キャッチされていません(約束されています):エラー:テンプレート解析エラー:「app-test」は既知の要素ではありません:1。「app-test」がAngularコンポーネントの場合は、それがこのモジュールの一部であることを確認してください。2.「app-test」がWebコンポーネントの場合、このメッセージを抑制するために、このコンポーネントの「@ NgModule.schemas」に「CUSTOM_ELEMENTS_SCHEMA」を追加します。( "=" _ blank "rel =" noopener "href =" https://ionicframework.com/docs ">ドキュメントがガイドになります。
これが私のファイルがどのように見えるかです:app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { TestComponent } from './test/test.component';
@NgModule({
declarations: [AppComponent, TestComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
test.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
home.page.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
}
home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HomePage } from './home.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
])
],
declarations: [HomePage]
})
export class HomePageModule {}
home.page.html
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
The world is your oyster.
<p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>
<app-test></app-test>
</ion-content>
私はこれまでにいくつかのことを試しましたが、1つの回避策は、src / app / shared.module.tsファイルを作成し、そこでTestComponentを宣言してエクスポートし、コンポーネントを使用するすべてのページにSharedModuleをインポートすることです。
しかし、この回避策は理想的ではないと感じており、それをよりクリーンにする方法に欠けていることがあります。何か案は?
共有モジュールの回避策は、実際にはAngularでの優れたプラクティスであり、これに固執する必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加