{"id":19391125,"url":"https://github.com/asone/ionic-3_angular-5-boilerplate","last_synced_at":"2026-04-13T04:38:55.699Z","repository":{"id":82334316,"uuid":"129291514","full_name":"Asone/ionic-3_Angular-5-Boilerplate","owner":"Asone","description":"A ionic 3 \u0026 Angular 5 boilerplate","archived":false,"fork":false,"pushed_at":"2018-07-09T18:02:14.000Z","size":4993,"stargazers_count":2,"open_issues_count":7,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-07T09:47:00.038Z","etag":null,"topics":["angular","angular5","boilerplate","circle-ci","cordova","docker","ionic","karma","karma-jasmine","travis-ci","typedoc","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Asone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-12T17:58:08.000Z","updated_at":"2020-07-23T04:42:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"628e523b-6e0b-4a16-b707-7c4d486c74e6","html_url":"https://github.com/Asone/ionic-3_Angular-5-Boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asone%2Fionic-3_Angular-5-Boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asone%2Fionic-3_Angular-5-Boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asone%2Fionic-3_Angular-5-Boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Asone%2Fionic-3_Angular-5-Boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Asone","download_url":"https://codeload.github.com/Asone/ionic-3_Angular-5-Boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240557489,"owners_count":19820359,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","angular5","boilerplate","circle-ci","cordova","docker","ionic","karma","karma-jasmine","travis-ci","typedoc","typescript"],"created_at":"2024-11-10T10:25:01.409Z","updated_at":"2026-04-13T04:38:50.678Z","avatar_url":"https://github.com/Asone.png","language":"JavaScript","readme":"\n# Another Ionic 3 \u0026 Angular 5 Boilerplate\n\n[![Build Status](https://travis-ci.org/Asone/ionic-3_Angular-5-Boilerplate.svg?branch=master)](https://travis-ci.org/Asone/ionic-3_Angular-5-Boilerplate) [![](https://circleci.com/gh/Asone/ionic-3_Angular-5-Boilerplate.png?circle-token=:circle-toke)](https://circleci.com/gh/Asone/ionic-3_Angular-5-Boilerplate)\n\nThe following repo provides a boilerplate for projects intended to be written with Ionic 3 \u0026 Angular 5. \n\nAs there are many boilerplates for Ionic 3 and Angular 5 most of those didn't fit to my workflow as many bring little architecture and contextualization. \n\nBuilding a professional app is a complex workflow in which developpers often interact with poly-environments parameters, dependencies management, tests and documentation. \n\nThe repo intends to fullfill the most common expectations found in the workflows to create a clone\u0026go boilerplate as up-to-date as possible.\n\n\n# Install\n\n## Install without Docker : \n\nYou need to install `node` first in order to be able to download the following dependencies : \n\n#### Install Ionic : `npm i -g Ionic`\n#### Install Karma : `npm i karma --save-dev`\n#### Install Angular-cli : `npm -g angular-cli`\n#### Install dependencies : `npm install`\n#### Generate documentation : `npm run doc`\n#### Perform unit tests : `npm test`\n#### Perform end-to-end tests :`npm e2e`\n\n## Install with Docker : \n\nMake sure you've installed docker first\n\n`docker-compose build . \u0026\u0026 docker-compose up front -d`\n\nIt will run a `ionic serve` instruction on port 8100.\n\n# Structure\n\nEven if there is no perfect folder structure, some recommandations exist about how to structure your project. \n\nThe repo brings the described structures and coding conventions, trying to stick as much as possible to the official recommendations.\n\n## Root Structure\n\nRoot level is described as following : \n\n```\n- src/\t\t\t\t=\u003e Sources of the application\n- test-config/        \t\t=\u003e Config files for environments handling\n-  package.json\t\t\t=\u003e Configure dependencies and npm run scripts\n- tsconfig.json\t\t\t=\u003e TypeScript configuration\n- ionic.config.json\t\t=\u003e Ionic configuration\n- config.xml\t\t\t=\u003e Application configuration\n- environments/\t\t\t=\u003e Environment configuration\n- config/ \t\t\t=\u003e Config folder containing main webpack configuration\n- Test/ \t\t\t=\u003e Config for environments handling\n```\n\n## Application Structure \n\n### Global Structure\nGlobal structure is the following : \n\n```\n- _Components\t\t\t\t=\u003e Components for Angular\n- _Models\t\t\t\t=\u003e Custom types and interfaces \n- _TestData\t\t\t\t=\u003e Mocked data for tests \u0026 development\n- _Services\t\t\t\t=\u003e Injectable classes for services like API requests\n- _Pages\t\t\t\t=\u003e Pages containers for Ionic\n\n```\n\n### Angular Classes \u0026 Components\n\nFollowing good practices, the structure of an Angular component should be as follows : \n\n```\n- MyComponent\n\t- MyComponent.component.ts\t\t\t=\u003e Component Class\n\t- MyComponent.component.spec.ts\t\t\t=\u003e Unit tests\n\t- MyComponent.component.e2e.ts\t\t\t=\u003e end-to-end tests\n\t- MyComponent.component.scss\t\t\t=\u003e SASS/CSS styles\n\t- MyComponent.component.html\t\t\t=\u003e HTML Template\n```\n\n### Ionic pages Classes\n\nIonic pages classes should follow the same convention, however we will put here an additional file declaring an [`ngModule`](https://angular.io/api/core/NgModule)  for page which will provide Ionic Modules \u0026 scoped Angular components.\n\n```\n- MyPage\n\t- MyPage.page.ts\t\t\t\t=\u003e Component Class\n\t- MyComponent.page.spec.ts\t\t\t=\u003e Unit tests\n\t- MyComponent.page.e2e.ts\t\t\t=\u003e end-to-end tests\n\t- MyComponent.page.scss\t\t\t\t=\u003e SASS/CSS styles\n\t- MyComponent.page.html\t\t\t\t=\u003e HTML Template\n\t- MyComponent.page.module.ts\t        \t=\u003e Page Module\n```\n\n# Dependencies\n\n## Frameworks\n\n### Core :\n\n| Dependency | Description | Version | Documentation |\n|----------------|-------------------------------|-----------------------------|------|\n|Ionic| Javascript Hybrid Application development framework |v.3.20.2 | [Documentation](https://ionicframework.com/docs/) |\n|Angular| SPA Framework for webapp development | @angular/core : v.5.2.9 \u003cbr /\u003e angular-cli : v.1.2.3 | [Documentation](https://angular.io/docs) |\nCordova |mobile application development framework | v8.0.0 | [Documentation](https://cordova.apache.org/docs/) |\n| Typescript |  JavaScript super-set for strong-typing code | v2.4.2 | [Documentation](http://www.typescriptlang.org/docs/) |\n|Karma |Unit testing| Karma : v.2.0.0 \u003cbr /\u003e karma-webpack : v.^3.0.0 | [Documentation](https://karma-runner.github.io/) |\n| Jasmine | Behavior-driven development framework | v.^2.8.6 | [Documentation](https://jasmine.github.io/pages/docs_home.html) |\n| Istanbul | test coverage reporting. Compatible reports for Jenkins. Package name : istanbul-instrumenter-loader | v.^3.0.1 | [Documentation](https://github.com/gotwarlost/istanbul) |\n| Webpack | Bundle handler | v.3.8.1 | [Documentation](https://webpack.js.org/guides/) |\n\n### Cordova plugins :\n\n|         Dependency package    \t |   Description         \t\t\t         | Version                       |\n|----------------|-------------------------------|-----------------------------| \n|  Deeplinks | URI navigation \u0026 Universal links | v.^1.0.15  \n|  Network   | Device network access | \n\n### Ionic dependencies : \n\n|         Dependency package    \t |   Description         \t\t\t         | Version                       |\n|----------------|-------------------------------|-----------------------------| \n|  IonicStorageModule  | Device storage | v.3.20.0  |\n| Network | Network access module |\n\n\n### Angular Dependencies : \n\n|         Dependency package    \t |   Description         \t\t\t         | Version                       |\n|----------------|-------------------------------|-----------------------------| \n|  @angular/animations \u003cbr /\u003e@angular/common \u003cbr /\u003e @angular/compiler  \u003cbr /\u003e@angular/compiler-cli: ^5.2.9 \u003cbr /\u003e@angular/core  \u003cbr /\u003e @angular/forms  \u003cbr /\u003e @angular/http \u003cbr /\u003e @angular/platform-browser \u003cbr /\u003e @angular/platform-browser-dynamic  | Core modules| v.5.2.9\n| @angular/animations| animations for components | v.5.2.9\n\n### Webpack plugins : \n\n|         Dependency package    \t |   Description         \t\t\t         | Version                       |\n|----------------|-------------------------------|-----------------------------| \n|  angular2-template-loader  | Core modules| v.5.2.9 |\n| \thtml-loader\t\t\t| \t\tbundles html files\t\t| \n| @angular/animations| animations for components | v.5.2.9\n\n\n### Karma plugins \n\n| Dependency package |  Description| Version |\n|-|-|-|\n|karma-chrome-launcher| loads karma in chrome | |\n|karma-firefox-launcher| loads karma in firefox | |\n|karma-jasmine | behavior driven framework | |\n|karma-jasmine-html-reporter|  pretty ui for jasmine\n\n## Angular Modules\n\nTODO\n\n## Ionic Modules\n\nTODO\n\n\n# Included features\n\n## Environment handling\n\n**Environment variables for build configuration.** \nUseful for handling different environment dependencies likes IPs or network URIs.   \n\n## Travis Continuous integration ready\n\nThis repo comes with a functionnal travis configuration. When committing your work travis will try the following build :\n- Cordova configuration\n- Build creation for the ionic app\n- Running unit tests\n\n## Circle CI integration ready\n\nLike Travis CI use, this repo provides also a **Circle CI configuration**. It will run a similar build as the one you can find for Travis.\n\n## Storage service\n\n**Angular service for accessing application storage.** \nUseful for data caching, user auto-authentication and user parameters settings.\n\n## Network heart \u0026 pulse\n\n**Angular service for network state.** \nThis service can be used to dispatch connectivity behaviors. Some other applications for service are request buffering and cache management.\n\nNote that connectivity state is boolean.\n\n## Auto resume auth \n\nMain App module has a built-in method to **load a session**.  If a `session` key is found in storage, App module will check for connectivity and execute a  `resume` from access authentication API class if `connected`.\n\nuseful for authentication based behaviours developments.\n\n## Good practices \u0026 conventions \n\n- [Angular good practices](https://angular.io/guide/styleguide)\n- [TypeScript good practices](https://definitelytyped.org/guides/best-practices.html)\n\n\n# Licence\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasone%2Fionic-3_angular-5-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasone%2Fionic-3_angular-5-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasone%2Fionic-3_angular-5-boilerplate/lists"}