Ionic framework 离子按钮显示'；离子按钮'；不是已知元素

我是新来的爱奥尼亚，这似乎是一个愚蠢的问题，但我需要一些帮助 使用一些简单的按钮就是抛出错误。我使用的是离子4.0

“离子按钮”不是已知元素： 1.如果“离子按钮”是一个角度组件，则确认它是该模块的一部分。 2.如果“ion button”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息

Primary

试试这个

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

Primary

是，试试这个

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

Primary

我也遇到过这种情况。您的解决方案不是最好的，因为新的Ionic 4方法是使用

（）

在

/src/app/my page/my page/my page.html

下的页面中，它确实可以很好地工作，但是当我将它放在

/src/shared/components/my comp/my comp.html

中时，它给出了错误。奇怪的是，我在同一页中有其他离子元素

，

和

。此外，这段代码以前在

my page.html

中工作，没有错误

仅供参考，

MyComponent

作为

声明和
导出在
组件.module.ts
中。还不确定我错过了什么

更新1：在
src
和
src/app
下移动
components
目录没有任何区别

更新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

   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

更新3：在此环境中仍处于中断状态：

   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

   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：经过多次尝试和错误，我不得不将
SCHEMA:[CUSTOM\u ELEMENTS\u SCHEMA]
添加到我的
components.module.ts
文件中。我可以让目录结构保持原样。不过，我不确定这个场景为什么需要这样做。
我也在这方面做了一段时间，直到我意识到问题在于我没有正确创建离子角项目。必须包括--type=angular


经验：
ionic start myApp选项卡--type=angular
为避免出现该错误消息：

将自定义元素模式导入app.modules.ts中：
将[CUSTOM_ELEMENTS_schema]添加到app.modules.ts，如下所示：
在ionic 4之后，我遇到了类似的问题，所以我在app.modules.ts中添加了自定义元素模式。然后它工作得很好

应用程序模块.ts

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

似乎您没有在组件模块中导入
ionicModule
。因此，在module.ts中导入
Ionic模块
，其余的工作将正常进行
我认为解决方案是在相应的模块导入中导入Ionic模块

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

})

从'@ionic/angular'导入{IonicModule} 应在app.module.ts中添加

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


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

我的问题是，在这个错误之前有一些错误似乎是层叠而下的。我所犯的错误是声明中的一些元素应该在提供者中。此外，其中一个在构造函数中标记为private，而它本应是公共的

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

@NgModule({
进口：[
离子模块，
公共模块，
FormsModule，
RouterModule.forChild（[{路径：''，组件：DevicePage}]），
设备页面路由模块，
TranslateModule.forChild（）
],
声明：[设备页面-->删除BLE、定位精度、设备管理服务]，
提供者：[BLE，LocationAccurance，DeviceManager服务]在Ionic 5中，当我使用--prod选项构建时，我遇到了同样的问题

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

ionic g module modules/shared

cat共享模块

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 { }

import{NgModule，CUSTOM_ELEMENTS_SCHEMA}来自'@angular/core'；
从“@angular/common”导入{CommonModule}；
导入{FooComponent}来自“../../components/foo/foocomponent.component”；虽然这段代码可能会回答这个问题，但提供有关如何以及为什么解决问题的附加上下文将提高答案的长期价值。感谢您的回答。它起了作用。我尝试了在官方链接中提供的文档，但不知怎的，它没有起作用。此路径还提供了文档，node_modules/ionic angular/components/button/button.js谢谢你的回答。它起作用了。我尝试了官方链接中提供的文档，但不知怎么的，它不起作用。此路径还提供了文档，node_modules/ionic angular/components/button/button.js这里提供了所有UI组件文档，您只是不使用ionic 4，但仍然是版本n 3；）我将如何使用ionic 4？我需要更改什么。我有与OP.CUSTOM_ELEMENTS_模式相同的问题，允许Angular合并自定义元素。ionic 4也有类似的问题。我必须将CUSTOM_ELEMENTS_模式添加到app.module.ts和components.module.ts以使其工作。我认为需要强调的另一个重要问题是f或者使用延迟加载的人，您必须对每个页面的模块执行此操作。这对我不起作用。我也将其放在所有模块中，因为我使用的是延迟加载。这应该是answer@VladimirDespotovic然后使用“-g”再次正确安装ionic cli。执行此操作时，会出现另一个错误：声明应为.ts（1146）请用英语写你的答案，因为
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 { }