Create and publish a custom Ionic 5 Component

@me-cedric wrote:

Hi,

I am working on a custom component that might be published as a package.
I followed a few different tutorials on publishing angular libraries or old posts related to Ionic 2 and 3.

I wanted to know if my logic is correct and if I followed the guidelines?

What I did

Initialization

First, I created a new Ionic 5 app, then created an angular library in the project using:
ng g library ngx-my-library --prefix=my-prefix

Dependencies

Then added the dependencies to ionic, the package.json of my library:

{
  "name": "ngx-bot-client",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^9.1.6",
    "@angular/core": "^9.1.6",
    "@ionic/angular": "^5.0.0",
    "tslib": "^1.10.0"
  }
}

Usual stuff

I removed the mgx-my-library.service.ts file since I don’t use it, and removed the export from the public-api.ts file
Then I worked on the library like I would on a traditional Ionic module.

Import in the project

Finally I imported the library in the page inside a page of my project:

import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { IonicModule } from '@ionic/angular'
import { FormsModule } from '@angular/forms'
import { HomePage } from './home.page'
import { HomePageRoutingModule } from './home-routing.module'

import { NgxMyLibraryModule } from 'ngx-my-library'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    NgxMyLibraryModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Usage

<my-prefix-ngx-my-library [my-input]="myProjectData"></my-prefix-ngx-my-library>

Conclusion

I’m not sure if this is the proper way to do this, if you have any suggestions or advice on this matter.

Thanks in advance for your help and for your suggestions!

Best Regards,

Cédric

Posts: 1

Participants: 1

Read full topic