web-dev-qa-db-ja.com

Ionic 'ion-button'を示すボタンは既知の要素ではありません

私はionicは初めてですが、ばかげた質問のようですが、いくつかの助けが必要です。いくつかの単純なボタンを使用すると、エラーが発生します。私はionic 4.0を使用しています。

'ion-button'は既知の要素ではありません：1. 'ion-button'がAngularコンポーネントである場合、それがこのモジュールの一部であることを確認してください。2。 'はWebコンポーネントです。次に、このメッセージを抑制するために、このコンポーネントの' @ NgModule.schemas 'に' CUSTOM_ELEMENTS_SCHEMA 'を追加します。

<ion-button color="primary">Primary</ion-button>
ionic-frameworkionic4
13
anubhab

これを試して、

<button ion-button color="primary">Primary</button>
8
Mangesh Daundkar

このエラーメッセージを回避するには：

  1. インポートCUSTOM_ELEMENTS_SCHEMAをapp.modules.tsにインポートします。
    import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  1. 以下のようにschema：[CUSTOM_ELEMENTS_SCHEMA]をapp.modules.tsに追加します。
    @NgModule({
      declarations: [
        MyApp,
        HomePage
      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        MomentModule,
        IonicModule.forRoot(MyApp),
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        HomePage
      ],
      providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler},
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
1
Gerry R

コンポーネントモジュールにionicModuleをインポートしていないようです。したがって、module.tsにIonicModuleをインポートすると、残りの部分は正常に機能します

1
ram12393

はい、これを試してください

<button ion-button color="primary">Primary</button>
1
tanzeel khalid

私もこれに遭遇しました。新しいIonic= 4つの方法は<ion-button>（ https://beta.ionicframework.com/docs/components/#ボタン ）。

/src/app/my-page/my-page.htmlの下にあるページでは問題なく機能しますが、/src/shared/components/my-comp/my-comp.htmlに配置するとエラーが発生します。奇妙なことに、同じページに他のIonic=要素がある<ion-grid>、<ion-row>、<ion-col>があります。また、このコードはmy-page.htmlエラーなしで機能した場所。

参考までに、MyComponentはdeclarationおよびexportとしてcomponents.module.tsにあります。何が欠けているかまだわかりません...

更新1：componentsディレクトリをsrcの下にもsrc/appの下にも移動しても違いはありませんでした。

更新2：これは私の環境です：

   ionic (Ionic CLI)          : 4.0.6
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.2
   @angular-devkit/schematics : 0.7.2
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

更新3：この環境ではまだ壊れています：

   ionic (Ionic CLI)          : 4.1.0
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.2
   @angular-devkit/schematics : 0.7.2
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

更新4：試行錯誤の末、schemas: [CUSTOM_ELEMENTS_SCHEMA]をcomponents.module.tsファイルに追加する必要がありました。ディレクトリ構造をそのままにしておくことができました。ただし、これがこのシナリオに必要な理由はわかりません。

1
Russ

ionic 4の後に同様の問題が発生したため、app.modules.tsにCUSTOM_ELEMENTS_SCHEMAを追加しました。その後、問題なく動作しました

app.module.ts

  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    SpineRestServiceProvider,
    FingerprintAIO
      ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
0
user8361459

問題が私がIonic Angularプロジェクトを適切に作成しなかったことが原因であることがわかりました。 --type = angular
https://github.com/ionic-team/ionic-cli

exp：ionic myAppタブを開始する--type = angular

0
Claudio Teles