22

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

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

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

12 回答 12

25

为了避免该错误消息：

  1. 将CUSTOM_ELEMENTS_SCHEMA导入app.modules.ts：
    import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  1. 将架构：[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]
    })
于 2019-01-15T17:26:01.230 回答
25

尝试这个，

<button ion-button color="primary">Primary</button>
于 2018-07-27T05:23:05.063 回答
21

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

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

})
于 2019-10-25T05:52:21.020 回答
5

我也遇到过这个。您的解决方案不是最好的解决方案，因为新的 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.tsadeclaration和 anexport中。还不知道我错过了什么......

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

于 2018-08-17T21:31:47.737 回答
4

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

于 2019-01-27T10:19:12.613 回答
1

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

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

ionic g module modules/shared

猫共享模块

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 { }
于 2021-05-31T18:00:18.473 回答
1

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

declarations: [MyComponent],
exports: [
    PopoverComponent,
]
于 2021-08-31T12:50:03.760 回答
1

是的，试试这个

<button ion-button color="primary">Primary</button>
于 2018-08-02T11:41:30.970 回答
0

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

@NgModule({
    imports: [
        IonicModule,
        CommonModule,
        FormsModule,
        RouterModule.forChild([{ path: '', component: DevicesPage }]),
        DevicesPageRoutingModule,
        TranslateModule.forChild()
    ],
    declarations: [DevicesPage  --> remove BLE, LocationAccuracy, DeviceManagerService  ],
    providers: [BLE, LocationAccuracy, DeviceManagerService]  <--Add
})
于 2020-11-20T06:53:52.007 回答
-1

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

exp: ionic start myApp tabs --type=angular

于 2018-09-06T16:34:20.243 回答
-1

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

app.module.ts

  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    SpineRestServiceProvider,
    FingerprintAIO
      ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
于 2019-01-27T08:49:48.367 回答
-1

应该添加 app.module.ts

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


  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] ==> add line**
于 2020-09-26T16:14:07.980 回答