显示 'ion-button' 的 Ionic 按钮不是已知元素

Question

我是 ionic 的新手，这似乎是个愚蠢的问题，但我需要一些帮助使用一些简单的按钮会引发错误。我正在使用离子 4.0。

'ion-button' is not a known element: 1. If 'ion-button' is an Angular component, then verify that it is part of this module. 2. If 'ion-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

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

Answer 1

试试这个，

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

Answer 2

是的，试试这个

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

Answer 3

我也运行喜欢这个。您的解决方案不是最好的解决方案，因为新的 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 中时它给出了错误。奇怪的是，我在同一页 <ion-grid>、<ion-row> 和 <ion-col> 中还有其他 Ionic 元素。此外，这段代码曾经在 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 文件中。我能够保持目录结构不变。不过，我不确定为什么这种情况需要这样做。

Answer 4

我也坚持了一段时间，直到我意识到问题是我没有正确创建 Ionic Angular 项目。你必须包括 --type=angular
https://github.com/ionic-team/ionic-cli

exp: 离子启动 myApp 选项卡 --type=angular

Answer 5

为了避免该错误消息：

将CUSTOM_ELEMENTS_SCHEMA导入app.modules.ts:

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

添加 架构：[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 6

我在 ionic 4 之后遇到了类似的问题，所以我在 app.modules.ts 中添加了 CUSTOM_ELEMENTS_SCHEMA。然后它工作正常

app.module.ts

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

Answer 7

您似乎没有在组件模块中导入 ionicModule。所以，在 module.ts 中导入 IonicModule，其余的东西都可以正常工作

Answer 8

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

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

})

Answer 9

应该加上app.module.ts

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


  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] ==> add line**

Answer 10

我的问题是，在此错误之前存在一些错误，这些错误似乎是级联的。我遇到的错误是声明中的某些元素本应包含在提供者中。此外，其中一个在构造函数中被标记为私有，而它应该是 public.

@NgModule({
    imports: [
        IonicModule,
        CommonModule,
        FormsModule,
        RouterModule.forChild([{ path: '', component: DevicesPage }]),
        DevicesPageRoutingModule,
        TranslateModule.forChild()
    ],
    declarations: [DevicesPage  --> remove BLE, LocationAccuracy, DeviceManagerService  ],
    providers: [BLE, LocationAccuracy, DeviceManagerService]  <--Add
})

Answer 11

在 Ionic 5 中，我在使用 --prod 选项构建时遇到了同样的问题。

由于 *.module.ts 文件在 Ionic 5 的组件中不可用，我需要为组件添加共享模块，然后向该共享模块添加 CUSTOM_ELEMENTS_SCHEMA 模式。

ionic g module modules/shared

猫shared.module

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooComponent } from '../../components/foo/foocomponent.component'; <== Add your components


@NgModule({
  declarations: [FooComponent], <== Add your components
  imports: [
    CommonModule
  ], 
  exports: [FooComponent], <== Add your components
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SharedModule { }

Answer 12

在父模块中导入您的自定义组件。例如在你的 app.module.ts:

declarations: [MyComponent],
exports: [
    PopoverComponent,
]

Answer 13

我在构建的库中遇到了这个问题因为我忘记导出正在导入 IonicModule 并导出我的组件的模块。

因此，在我的模块中导入 Ionic 库并导出我的组件，如下所示。

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';

import { MyComponent } from './my.component';

@NgModule({
  declarations: [
    MyComponent,
  ],
  imports: [
    CommonModule,
    IonicModule,
  ],
  exports: [
    MyComponent,
  ],
})
export class MyModule {
}

在我的库的 public-api.ts 文件中，我应该有这样的东西

export { MyModule } from './lib/my.module'; // <--- exporting my module
export { MyComponent } from './lib/my.component';

显示 'ion-button' 的 Ionic 按钮不是已知元素

Ionic button showing 'ion-button' is not a known element

ionic-framework

ionic4