How to use Ionic components in existing angular project

Question

Intially I have an angular project where I have used Angular Material, later I have added the Ionic Framework by this process(https://stack247.wordpress.com/2019/03/11/integrate-ionic-in-existing-angular-project/), but I am not able use Ionic components, even the console is not displaying any errors.

my app.module.ts

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

  imports[IonicModule]

HTML:

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

MadMac · Accepted Answer · 2020-12-20 22:35:32Z

1

To use Ionic components in an existing Angular project. Two easy steps:

Add schemas: [ CUSTOM_ELEMENTS_SCHEMA ] to your module (app.module.ts)

Like so:

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

Add a link to the CDN in your index.html

<script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>

answered Dec 20, 2020 at 22:35

MadMac

5,0038 gold badges48 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Khurshid Ansari · Accepted Answer · 2021-06-16 10:24:21Z

0

You can include ionic library in angular by following command:

npm install @ionic/angular@latest --save

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

answered Jun 16, 2021 at 10:24

Khurshid Ansari

5,1142 gold badges39 silver badges63 bronze badges

Collectives™ on Stack Overflow

How to use Ionic components in existing angular project

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related