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

7 回答

• 1

  试试这个，

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

  回复于 2024-04-30T03:24:17+08:00
• 2

  为了避免该错误消息：

  • 将 CUSTOM_ELEMENTS_SCHEMA 导入app.modules.ts：

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

  • 将 schema: [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]
      })
  

  回复于 2024-04-30T03:24:17+08:00
• 1

  我也遇到过这种情况 . 您的解决方案不是最好的解决方案，因为新的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：移动 src 下的 components 目录和 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 文件中 . 我能够原样保留目录结构 . 不过，我不确定为什么这个场景需要这样做 .

  回复于 2024-04-30T03:24:17+08:00
• 5

  是试试这个

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

  回复于 2024-04-30T03:24:17+08:00
• 0

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

  回复于 2024-04-30T03:24:17+08:00
• 0

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

  exp：ionic start myApp tabs --type = angular

  回复于 2024-04-30T03:24:17+08:00
• 12

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

  app.module.ts

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

  回复于 2024-04-30T03:24:17+08:00