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

为了避免该错误消息：

将 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 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>中还有其他离子元素。另外，这段代码曾经在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

似乎您没有在组件模块中导入ionicModule。因此，将IonicModule导入module.ts中，其余的一切将正常工作

Answer 5

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

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

})

Answer 6

是的，请尝试

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

Answer 7

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

exp： ionic启动myApp选项卡--type = angular

Answer 8

在离子4之后，我遇到了类似的问题，因此我在app.modules.ts中添加了CUSTOM_ELEMENTS_SCHEMA。然后效果很好

app.module.ts

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

Answer 9

我的问题是，在此错误之前，有一些错误似乎在逐步减少。我的错误是声明中应该包含在提供程序中的某些元素。另外，其中一个应该在构造函数中应公开的时候标记为私有。

@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 10

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

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

ionic g module modules/shared

cat 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 11

应添加app.module.ts

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


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

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

11 个答案: