显示"离子按钮"的离子按钮不是已知元素

Question

我是离子的新手,这似乎是一个愚蠢的问题,但我需要一些帮助使用一些简单的按钮抛出错误.我正在使用离子4.0.

'ion-button'不是已知元素:1.如果'ion-button'是Angular组件,则验证它是否是此模块的一部分.2.如果'ion-button'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息.

<ion-button color="primary">Primary</ion-button>

Answer 1

试试这个,

<button ion-button color="primary">Primary</button>

Answer 2

我认为解决方案是在相应的模块导入中导入 Ionic 模块

import { IonicModule } from '@ionic/angular';  <--add this line
@NgModule({
imports: [
    CommonModule,
    FormsModule,
    IonicModule, <-- add this line
  ],

})

Answer 3

为了避免该错误消息：

1. 将CUSTOM_ELEMENTS_SCHEMA导入app.modules.ts：

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

2. 将方案：[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]
    })

Answer 4

我也遇到过这个。您的解决方案不是最好的，因为新的 Ionic 4 方式是使用<ion-button>（https://beta.ionicframework.com/docs/components/#button）。

它在我下面的页面中确实对我有用/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是在components.module.ts作为declaration与一个export。还不确定我错过了什么......

更新 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文件中。我能够保持目录结构不变。不过，我不确定为什么这种情况需要这样做。