如何在现有的 Angular 项目中使用 Ionic 组件答案

【问题标题】：How to use Ionic components in existing angular project如何在现有的 Angular 项目中使用 Ionic 组件
【发布时间】：2021-06-16 18:24:21
【问题描述】：

最初我有一个使用 Angular Material 的 Angular 项目，后来我通过这个过程添加了 Ionic 框架（https://stack247.wordpress.com/2019/03/11/integrate-ionic-in-existing-angular-project/），但我无法使用 Ionic 组件，即使控制台也没有显示任何错误。

我的 app.module.ts

  import { IonicModule } from '@ionic/angular';

  imports[IonicModule]

HTML：

  <ion-badge color="primary">11</ion-badge>

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

在现有的 Angular 项目中使用 Ionic 组件。两个简单的步骤：

将schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 添加到您的模块 (app.module.ts)

像这样：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ],
  schemas:      [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

在 index.html 中添加指向 CDN 的链接

&lt;script src="https://unpkg.com/@ionic/core@5.0.0/dist/ionic.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

您可以通过以下命令在 Angular 中包含离子库：

npm install @ionic/angular@latest --save

参考 https://ionicframework.com/docs/intro/cdn#ionic-angular

【讨论】：