{"id":15090028,"url":"https://github.com/jvitor83/angular-pwa-seed","last_synced_at":"2025-07-29T19:34:32.063Z","repository":{"id":73061668,"uuid":"71808426","full_name":"jvitor83/angular-pwa-seed","owner":"jvitor83","description":"Multiplatform Angular project (Web/PWA, Mobile and Desktop) with Ionic (and optionally Bootstrap) - Sample: https://angular-pwa-seed.netlify.com","archived":false,"fork":false,"pushed_at":"2018-11-28T04:54:35.000Z","size":5758,"stargazers_count":68,"open_issues_count":4,"forks_count":22,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-11T22:12:01.578Z","etag":null,"topics":["angular","cordova","ionic","pwa"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/jvitor83.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2016-10-24T16:25:08.000Z","updated_at":"2024-01-12T00:39:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"a0726670-4f96-4be9-8be3-273b344bc62d","html_url":"https://github.com/jvitor83/angular-pwa-seed","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/jvitor83/angular-pwa-seed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jvitor83%2Fangular-pwa-seed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jvitor83%2Fangular-pwa-seed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jvitor83%2Fangular-pwa-seed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jvitor83%2Fangular-pwa-seed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jvitor83","download_url":"https://codeload.github.com/jvitor83/angular-pwa-seed/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jvitor83%2Fangular-pwa-seed/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267743848,"owners_count":24137693,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","cordova","ionic","pwa"],"created_at":"2024-09-25T09:04:10.700Z","updated_at":"2025-07-29T19:34:31.934Z","avatar_url":"https://github.com/jvitor83.png","language":"TypeScript","funding_links":[],"categories":["Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"# Angular PWA Seed\n\n[![Join the chat at https://gitter.im/angular-pwa-seed/Lobby](https://badges.gitter.im/angular-pwa-seed/Lobby.svg)](https://gitter.im/angular-pwa-seed/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n[![Dependency Status](https://david-dm.org/jvitor83/angular-pwa-seed.svg)](https://david-dm.org/jvitor83/angular-pwa-seed)\n[![devDependency Status](https://david-dm.org/jvitor83/angular-pwa-seed/dev-status.svg)](https://david-dm.org/jvitor83/angular-pwa-seed#info=devDependencies)\n[![Lines of Code](https://tokei.rs/b1/github/jvitor83/angular-pwa-seed?style=flat-square)](https://github.com/jvitor83/angular-pwa-seed)\n[![DONATE](https://pledgie.com/campaigns/32766.png?skin_name=chrome)](https://pledgie.com/campaigns/32766)\n\n\n## Description\n\n**Multiplatform** [Angular](http://angular.io) project _([Web/PWA](https://developers.google.com/web/progressive-web-apps/), [Mobile and Desktop](https://cordova.apache.org/docs/en/latest/guide/support/index.html))_ with [Ionic](http://ionicframework.com/) applied.\n\n\n\n\n## Sample\n\nA sample is available at: https://angular-pwa-seed.netlify.com\n\n\n\u003e ## **TL;DR** _(Too Long; Didn't Read)_\n\u003e \n\u003e _Just want to see this running on browser and android (if have the emulator already configured)!_\n\u003e \n\u003e At shell/cmd run this _(windows only)_:\n\u003e ```Batchfile\n\u003e npm i -g yarn @angular/cli@1.7.1 cordova@6.5.0 ionic@2.2.3 typescript sleep-ms concurrently mkdirp \u0026\u0026 git clone https://github.com/jvitor83/angular-pwa-seed \u0026\u0026 cd angular-pwa-seed \u0026\u0026 npm install \u0026 (IF DEFINED ANDROID_HOME npm run install.android) \u0026 npm run start.cordova\n\u003e ```\n\n\n## Preview\n\n[![GIF](./preview.gif)](https://angular-pwa-seed.netlify.com)\n\n\n## Goal\n\nBe the easiest, simplest, fastest and performative way to create a **Web(PWA)** using Angular.\n\n\n\u003e ### Secondary goal\n\u003e Allow _optionally_ to create an installable application _(and **reach the maximum performance possible**)_ using:\n\u003e - [x] [Crosswalk WebView](https://crosswalk-project.org/documentation/cordova.html)\n\u003e - [x] Simple layout (without complex animations/effects) based on Ionic - [KISS](https://en.wikipedia.org/wiki/KISS_principle)\n\n\n## Features\n\n- Multiplatform (Web, Mobile, Desktop) [Cordova](https://cordova.apache.org/docs/en/latest/guide/support/index.html)\n- Multiples layouts out-of-box (Menu,Tab,Blank) ([Ionic](http://ionicframework.com/)/[Boostrap](http://getbootstrap.com/))\n- [Authentication/Authorization (OpenID/OAuth2)](https://github.com/IdentityModel/oidc-client-js/wiki)\n- VSCode Integration ([Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome), [Cordova Tools](https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools))\n- Angular CLI project ([Generator commands](https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services))\n\n\u003e ### Performance features\n\u003e - [x] [Angular Ahead-Of-Time Compilation](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)\n\u003e - [x] [Angular Lazy Loading Modules with PreloadAllModules Strategy](https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb)\n\u003e - [x] [Progressive Web App _Features_](https://developers.google.com/web/#progressive-web-apps) - Manifest and Offline _(for faster loading)_\n\n\n\u003e ### Developer Features\n\u003e _This Seed use Ionic to get the visual experience from each device/platform, be mobile friendly and performative. But it uses Ionic only at UI Components and Theming, the Router used is the **[Angular Router](https://angular.io/docs/ts/latest/guide/router.html)** and **not the [Ionic's NavController](https://ionicframework.com/docs/api/navigation/NavController/)**._\n\u003e - **PWA Already** - Manifest and ServiceWorker already configured (just need to host in HTTPS to get [A2HS](https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/)).\n\u003e \u003e The service-worker (offline) is updated at each publish `npm run publish.prod`, so no worry about updating the cache version.\n\u003e - **Multiple Layouts** - Choose between Menu, Tab and Blank Layouts\n\u003e \u003e At `app.html` in `\u003cseed-layout type=\"menu\"\u003e`, choose your desired layout type\n\u003e - **Fast start** - Just by giving the name, color theme and icon.\n\u003e \u003e Change the **config** section at `package.json`, create your icon at `resources/icon.png` _(for app)_ and `assets/logo.png` _(for enterprise)_, then run `npm run resources`\n\u003e - **Debugging** - Can debug easily\n\u003e \u003e At VSCode, Run (debugging) just by pressing \"\u003ckbd\u003eF5\u003c/kbd\u003e\"\n\u003e - **Simple responsive** - Choose when hide or show elements _(ex: if mobile or desktop)_.\n\u003e \u003e Use the directive `invisible-to=\"mobile\"` at any element/component to make it invisible when at mobile.\n\u003e - **Easy configuration** - Use the Angular CLI `environment.ts` for app's configuration.\n\u003e - **Flexibe authentication/authorization** - Authentication options is already setted (with google). \n\u003e \u003e If you want login with your choosed OAuth2/OpenID Connect Identity Provider, just change the `environment.ts` config and use `{ provide: AUTH_SERVICE, useClass: OidcAuthService }` at `providers` in `app.module.ts` (instead of `YoloAuthService`).\n\u003e \u003e\n\u003e \u003e Another option is to use `FirebaseAuthService` already implemented/configured just by using `{ provide: AUTH_SERVICE, useClass: FirebaseAuthService }` at `providers` in `app.module.ts` (instead of `YoloAuthService`).\n\u003e \u003e \n\u003e \u003e You can easily implement your own Authentication Service just by extending the `BaseAuthService\u003cany\u003e` at `base-auth.service.ts`. An sample of this approach is at `firebase-auth.service.ts`\n\u003e \u003e\n\u003e \u003e You can use the `@Inject(AUTH_SERVICE) private authService: BaseAuthService\u003cany\u003e` at your service/component constructor to get user infos at `this.authService.auth.value.identity.user.name` or by subscribing to it `this.authService.auth.subscribe(auth =\u003e this.name = auth.identity.user.name);`\n\u003e - **Fast development** - Use the Angular CLI commands or [AngularDoc VSCode Extension](https://marketplace.visualstudio.com/items?itemName=AngularDoc.angulardoc-vscode) to generate your components/pages.\n\u003e \u003e Ex: `ng g component new-cmp`. More info at [Angular CLI](https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services)\n\u003e - **Components you choose** - It already has **[Ionic](https://ionicframework.com/docs/components/)** and **[Bootstrap](http://valor-software.com/ngx-bootstrap/)** installed, but you can include any other you want.\n\u003e \u003e - Add **[PrimeNG](http://www.primefaces.org/primeng/)** components using this [guide](https://www.primefaces.org/primeng/#/setup) (Angular CLI Integration section)\n\u003e \u003e - Add **[KendoUI](http://www.telerik.com/kendo-angular-ui/components/)** components using this [guide](http://www.telerik.com/kendo-angular-ui/getting-started/)\n\u003e - **Container (Docker)** - It already has Dockerfile to build and host the App. And includes npm `scripts` at `package.json` to manipulate the docker image and container.\n\n\n\n## Technologies\n\n- [Angular](http://angular.io/)\n- [Angular CLI](https://cli.angular.io/)\n- [Ionic](http://ionicframework.com/)\n- [Cordova](https://cordova.apache.org/)\n- [Boostrap](http://getbootstrap.com/)\n- [Firebase](https://firebase.google.com/)\n- [OpenID/OAuth2 Client](https://github.com/IdentityModel/oidc-client-js)\n- [OpenYolo](https://github.com/openid/OpenYOLO-Web/)\n- [Docker](http://docker.io/)\n\n\n## Requirements\n\n- **GIT**: Have installed or Install GIT: [https://git-scm.com/downloads](https://git-scm.com/downloads)\n- **NODE**: Have installed or Install NODE **(6+)**: [https://nodejs.org/en/download/releases/](https://nodejs.org/en/download/releases/) \n- **Install Global Dependencies**: `npm install --global yarn @angular/cli@1.7.1 cordova@6.5.0 ionic@2.2.3 typescript sleep-ms concurrently mkdirp`\n- **Install Platform Requirements** _(optional if other different than web)_: See the **requirements** at **running** section according to your chosen platform. \n\n## Starting\n\n```bash\n# Install global dependencies\nnpm install --global yarn @angular/cli@1.7.1 cordova@6.5.0 ionic@2.2.3 typescript sleep-ms concurrently mkdirp\n\n# Clone this repo giving your new project name\ngit clone https://github.com/jvitor83/angular-pwa-seed.git [your-project-name]\n\ncd [your-project-name]\n\n# Set your origin repository (can be later if wanted to)\ngit remote set-url origin [your-project-git-repo]\n\n# Add this repository as upstream (to keep updated)\ngit remote add upstream https://github.com/jvitor83/angular-pwa-seed.git\n\n# Execute those always when want to get the latest updates from the seed\ngit fetch upstream\ngit merge upstream/master\n\n# Install the project's dependencies\nnpm install\n\n# (Optionally) Configure your project name, short_name and color at `package.json` and replace `./resources/icon.png` with the one of your project (must have 512x512)\nnpm run resources\n\n# (Optionally) Start the project\nnpm run start\n```\n\n\n## Container (Docker)\n\n```bash\n# Should already been cloned this repo\n\n# Build the Docker Image\nnpm run docker.build\n# You can add special parameters to the build process to use some private Registry and Proxy like:\n# npm run docker.build -- --build-arg registry=https://registry.npmjs.org/ --build-arg HTTP_PROXY=http://username:password@proxy.address:3128 --build-arg HTTPS_PROXY=http://username:password@proxy.address:3128\n\n# Run the Container\nnpm run docker.run\n\n# Navigate to http://localhost\n```\n\n\u003e Docker command to Build and Host _(Recreating the Image and Containers)_:\n\u003e ```Batchfile\n\u003e # Remove the Images and Containers (optional)\n\u003e docker image rm angular-pwa-seed -f\n\u003e\n\u003e # Create Image and run Container\n\u003e npm run docker.build \u0026\u0026 npm run docker.run\n\u003e ```\n\n\n## Running\n\nYou could use:\n- **[Angular-CLI commands](https://github.com/angular/angular-cli#usage)** to get it running on web (`ng serve`)\nand/or\n- **[Cordova commands](https://cordova.apache.org/docs/en/latest/guide/cli/index.html#build-the-app)** to get it running at others platforms (`cordova platform add android \u0026\u0026 cordova run android`).\n\u003e _Only remember to **first build the angular** `ng build` , **then run the cordova** `cordova run android`._\n\nSo, the steps are:\n\n| Web              | Other Platforms (Cordova)                                                             |\n|------------------|---------------------------------------------------------------------------------------|\n| - Run `ng serve` | - Compile the App `ng build`                                                          |\n|                  | - Install your desired platform **(one time only)** `cordova platform add android --save` |\n|                  | - Run your desired platform `cordova run android`                                     |\n\n\u003e **[VSCode:](https://code.visualstudio.com/)** **Running on Web:** Just press \u003ckbd\u003eF5\u003c/kbd\u003e\n\n\n**Requirements:**\n\n\u003e Each platform has your specific requirements (SDK, Tools, environment) to compile/run.\n\u003e \u003e _- Ex: To compile/run android, must have Android Studio or Android SDK installed and a emulator or device._\n\n\u003e \u003e _- Ex: To compile windows, must have Visual Studio and be on windows to run._\n\n\u003e See the links below to know how to install each requirement.\n\n\n**You could use some custom npm scripts/commands to install/run the platform:**\n\n\n| PLATFORM       | REQUIREMENTS/*GUIDE (Tools, Sdk, etc)*                                                        | INSTALL                   | RUN                     |\n|----------------|-----------------------------------------------------------------------------------------------|---------------------------|-------------------------|\n| Web            |                                                                                               |                           | `npm run start`         |\n| Android        | [Platform Guide](http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html) | `npm run install.android` | `npm run start.android` |\n| IOS            | [Platform Guide](http://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html)     | `npm run install.ios`     | `npm run start.ios`     |\n| Windows        | [Platform Guide](http://cordova.apache.org/docs/en/latest/guide/platforms/win8/index.html)    | `npm run install.windows` | `npm run start.windows` |\n| OSx            | [Platform Guide](http://cordova.apache.org/docs/en/latest/guide/platforms/osx/index.html)     | `npm run install.osx`     | `npm run start.osx`     |\n| Ubuntu (Linux) | [Platform Guide](http://cordova.apache.org/docs/en/latest/guide/platforms/ubuntu/index.html)  | `npm run install.ubuntu`  | `npm run start.ubuntu`  |\n| Browser        |                                                                                               | `npm run install.browser` | `npm run start.browser` |\n\n\n### Multiplatform\n\nYou can try multiple platform at same time using:\n- Open shell then run `npm run start.mobile`\n\u003e _If you want to see it in a non-web emulator, then run `npm run start.cordova`_\n\n\u003e \u003e _**It is highly recommended to use [Genymotion](https://www.genymotion.com/fun-zone/) for Android Emulation.**_\n\n## Structure\n\n```\n├── src                             \u003c- source code of the application\n│   ├── app                         \u003c- angular components\n```\n\nMore details at: [Angular CLI](https://cli.angular.io/) and [Ionic](http://ionicframework.com/docs/v2/components/)\n\n\n## AddOns\n\n### IDE:\n\n#### [![VS Code](https://image.ibb.co/gqDcMQ/VSCode.png)](https://code.visualstudio.com/) - Recommended extensions:\n- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)\n- [Angular Language Services](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)\n- [AngularDoc for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=AngularDoc.angulardoc-vscode)\n- [Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)\n- [Cordova Tools](https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools)\n- [Angular Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)\n- [Ionic 2 Snippets](https://marketplace.visualstudio.com/items?itemName=oudZy.ionic2-snippets)\n- [Ionic 2 Commands](https://marketplace.visualstudio.com/items?itemName=jgw9617.ionic2-vscode)\n- [Bootstrap 3 Snippets](https://marketplace.visualstudio.com/items?itemName=wcwhitehead.bootstrap-3-snippets) or [Bootstrap 4 Snippets](https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode)\n\n### Testing:\n\n[![BrowserStack](https://image.ibb.co/hKLrgQ/rsz_2browserstack_logo_600x315.png)](https://www.browserstack.com) - Testing against multiple browsers/platforms\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjvitor83%2Fangular-pwa-seed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjvitor83%2Fangular-pwa-seed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjvitor83%2Fangular-pwa-seed/lists"}