{"id":22031970,"url":"https://github.com/datencia/ionic-packaged","last_synced_at":"2026-04-05T22:01:59.787Z","repository":{"id":38814256,"uuid":"135807925","full_name":"datencia/ionic-packaged","owner":"datencia","description":"An Ionic library packaged with ng-packagr","archived":false,"fork":false,"pushed_at":"2022-12-09T04:56:58.000Z","size":1252,"stargazers_count":3,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T11:43:19.541Z","etag":null,"topics":["angular","angular-library","ionic","ionic-libraries","ng-packagr"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datencia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-02T10:18:23.000Z","updated_at":"2022-03-28T03:40:47.000Z","dependencies_parsed_at":"2022-09-18T11:40:45.383Z","dependency_job_id":null,"html_url":"https://github.com/datencia/ionic-packaged","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/datencia/ionic-packaged","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fionic-packaged","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fionic-packaged/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fionic-packaged/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fionic-packaged/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datencia","download_url":"https://codeload.github.com/datencia/ionic-packaged/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datencia%2Fionic-packaged/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31451446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"ssl_error","status_checked_at":"2026-04-05T21:22:51.943Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-library","ionic","ionic-libraries","ng-packagr"],"created_at":"2024-11-30T08:24:39.627Z","updated_at":"2026-04-05T22:01:59.291Z","avatar_url":"https://github.com/datencia.png","language":"CSS","readme":"# Packaging Ionic libraries with ng-packagr\n\nThis repository is an example of how to set-up an [Ionic](https://ionicframework.com/)\nproject to contain and build libraries that meets the Angular Package Format specification.\n\nIt features the `@my/lib` library package. `@my/lib` is packaged with\n[ng-packagr](https://github.com/dherges/ng-packagr) and then imported into the Ionic app.\n\nThe Ionic app will act as a sandbox where we could test out our components before\nwe package them.\n\n\n## Summary\n\n1. How this repo was created\n2. Creating your first library\n3. Building your library\n\n\n## How this repo was created\n\nFirst things first. All credits belong to [dherges](https://github.com/dherges) and his\n[ng-packaged](https://github.com/dherges/ng-packaged) sample. I've only adapted it to\n[Ionic](https://ionicframework.com/).\n\nSo, let's go...\n\n### Create an empty Ionic project\n\n```bash\n$ ionic start ionic-packaged blank\n```\n\n### Install the `ng-packagr` library as dev dependency\n\n```bash\n$ npm install --save-dev ng-packagr\n```\n\nInstall also `rimraf` (We will use it to delete the build output folder before building the library)\n\n```bash\n$ npm install --save-dev rimraf\n```\n\n### Create the library folder\n\nCreate a folder called `libs` at the project root level with the next structure:\n\n```\nlibs\n├── .browserslistrc\n├── package.json\n└── src\n    ├── lib.module.ts\n    └── public_api.ts\n```\n\nThis is enough for now. later on we will define the content of each file.\n\n### Add Build Script\n\nIn root `package.json` add the build script for your libraries:\n\n```json\n{\n  \"scripts\": {\n    \"build:lib\": \"rimraf dist \u0026\u0026 ng-packagr -p libs/package.json\",\n  }\n}\n```\n\n\u003e As you may have guessed, the build output folder is `dist`.\n\n### Configure the Ionic app to act as a Sandbox\n\nIn order to use the Ionic app as a sandbox we need to apply some changes to\nthe default Ionic config.\n\nModify your `tsconfig.json` and map the typescript import path for your library.\nIt should looks like this:\n\n```json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"allowSyntheticDefaultImports\": true,\n    \"declaration\": false,\n    \"emitDecoratorMetadata\": true,\n    \"experimentalDecorators\": true,\n    \"lib\": [\n      \"dom\",\n      \"es2015\"\n    ],\n    \"paths\": {\n      \"@my/lib\": [ \"dist/libs\" ]\n    },\n    \"module\": \"es2015\",\n    \"moduleResolution\": \"node\",\n    \"sourceMap\": true,\n    \"target\": \"es5\"\n  },\n  \"include\": [\n    \"src/**/*.ts\"\n  ],\n  \"exclude\": [\n    \".ng_build\",\n    \"node_modules\",\n    \"src/**/*.spec.ts\",\n    \"src/**/__tests__/*.ts\"\n  ],\n  \"compileOnSave\": false,\n  \"atom\": {\n    \"rewriteTsconfig\": false\n  }\n}\n```\n\nNow, we need to override the Ionic Webpack config.\n\nCreate a new folder called `config` at the root level of your Ionic project.\nThen add a `webpack.config.js` file with the next content.\n\n```javascript\nconst { join } = require('path');\nconst webpackMerge = require('webpack-merge');\nconst { dev, prod } = require('@ionic/app-scripts/config/webpack.config');\n\nconst customConfig = {\n  resolve: {\n    alias: {\n      \"@my/lib\": join(__dirname, '../dist/libs'),\n    }\n  }\n};\n\nmodule.exports = {\n  dev: webpackMerge(dev, customConfig),\n  prod: webpackMerge(prod, customConfig),\n};\n```\n\n\u003e Note we are requering `webpack-merge` to apply the changes to webpack. So you'll need\nto install it as a dev dependency.\n\n```bash\n$ npm install --save-dev webpack-merge\n```\n\nAnd the last step, tell Ionic to use the new webpack config. In root `package.json` add the next config:\n\n```json\n{\n  \"config\": {\n    \"ionic_webpack\": \"./config/webpack.config.js\"\n  },\n```\n\n### Create the library folder\n\nIt's time to back to the `libs` folder to add content to every file in.\n\n```\nlibs\n├── .browserslistrc\n├── package.json\n└── src\n    ├── lib.module.ts\n    └── public_api.ts\n```\n\n- `package.json`\n\n```json\n{\n    \"name\": \"@my/lib\",\n    \"version\": \"1.0.0-alpha.0\",\n    \"repository\": \"https://github.com/datencia/ionic-packaged.git\",\n    \"author\": \"David Atencia \u003cdavid.atencia@gmail.com\u003e\",\n    \"license\": \"MIT\",\n    \"private\": true,\n    \"peerDependencies\": {\n      \"@angular/core\": \"\u003e=5.2.10\",\n      \"@angular/common\": \"\u003e=5.2.10\",\n      \"ionic-angular\": \"3.9.2\"\n    },\n    \"ngPackage\": {\n      \"$schema\": \"./node_modules/ng-packagr/ng-package.schema.json\",\n      \"lib\": {\n        \"entryFile\": \"src/public_api.ts\"\n      },\n      \"dest\": \"../dist/libs\"\n    }\n  }\n\n```\n\n- `lib.module.ts`\n\n```typescript\nimport { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IonicModule } from 'ionic-angular';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        IonicModule,\n    ],\n    declarations: [\n        // The component, directive and pipe classes that belong to this module.\n    ],\n    exports: [\n        // A list of declarations — component, directive, and pipe classes — that an importing module can use.\n    ]\n})\nexport class MyLibModule {\n    public static forRoot(): ModuleWithProviders {\n        return {\n            ngModule: MyLibModule,\n            providers: [\n                // A list of dependency injection providers.\n            ]\n        };\n    }\n}\n```\n\n- `.browserslistrc`\n\n```\nlast 2 Chrome versions\niOS \u003e 10\nSafari \u003e 10\n```\n\n\u003e [browserslist](https://github.com/ai/browserslist) determines which browser versions should be supported.\n\n- `public_api.ts`\n\nThis file is the entry point to your library.\n\nIt should export all your components, services, pipes, etc.\n\n\u003e Right now you can leave it empty\n\n\n## Creating your first library\n\nNow you are ready to start coding your library.\n\nTODO\n\n\n## Building your library\n\nTo build your library just run:\n\n```bash\n$ npm run build:lib\n```\n\nThe build output is written to the dist folder, containing all those binaries\nto meet the Angular Package Format specification. \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatencia%2Fionic-packaged","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatencia%2Fionic-packaged","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatencia%2Fionic-packaged/lists"}