{"id":20532071,"url":"https://github.com/monogramm/ngxp-groceries-app","last_synced_at":"2026-05-06T13:34:42.533Z","repository":{"id":93144647,"uuid":"105319369","full_name":"Monogramm/ngxp-groceries-app","owner":"Monogramm","description":"A (really) cross platform groceries application built with Angular and Nativescript.","archived":false,"fork":false,"pushed_at":"2017-09-29T22:05:27.000Z","size":10336,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-16T12:58:38.760Z","etag":null,"topics":["angular","nativescript"],"latest_commit_sha":null,"homepage":null,"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/Monogramm.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":"2017-09-29T21:38:42.000Z","updated_at":"2024-05-30T17:06:02.000Z","dependencies_parsed_at":"2023-06-05T05:30:13.815Z","dependency_job_id":null,"html_url":"https://github.com/Monogramm/ngxp-groceries-app","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/Monogramm%2Fngxp-groceries-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monogramm%2Fngxp-groceries-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monogramm%2Fngxp-groceries-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monogramm%2Fngxp-groceries-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Monogramm","download_url":"https://codeload.github.com/Monogramm/ngxp-groceries-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242138801,"owners_count":20078007,"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","nativescript"],"created_at":"2024-11-16T00:12:35.014Z","updated_at":"2026-05-06T13:34:42.491Z","avatar_url":"https://github.com/Monogramm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NGXP Groceries App\nGroceries application for Web and Mobile (Android, iOS) with single code base buit with Angular and Nativescript. \n\nGroceries is a NativeScript and Angular built iOS, Android and Web app for managing grocery lists.\n\nThe app comes from the idea to merge the official Nativescript tutorial application [sample-Groceries](https://github.com/NativeScript/sample-Groceries) with the awesome [NGXP](https://ngxp.io/) concept.\n\nYou can learn how to build the Nativescript version of this app from scratch using either Nativescript's [JavaScript getting started guide](http://docs.nativescript.org/tutorial/chapter-0), or Nativescript's [TypeScript and Angular getting started guide](http://docs.nativescript.org/angular/tutorial/ng-chapter-0).\n\nIf you want to create your own cross-platform app similar to this, check this starter: [nativescript-angular-web-starter](https://github.com/shripalsoni04/nativescript-angular-web-starter).\n\n## Previews and Screenshots\n\n![](assets/screenshots/ios-1.png)\n![](assets/screenshots/ios-2.png)\n![](assets/screenshots/ios-3.png)\n\n![](assets/screenshots/android-1.png)\n![](assets/screenshots/android-2.png)\n![](assets/screenshots/android-3.png)\n\n![](assets/screenshots/iphone-screenshot.png)\n![](assets/screenshots/desktop-screenshot.png)\n\n## Prerequisites\n1. Globally installed Nativecript  - `npm install -g nativescript`\n2. Globally installed Angular CLI - `npm install -g angular-cli`\n3. Mac OS to build iOS app.\n\n## Installation\n1. `git clone https://github.com/Monogramm/ngxp-groceries-app.git`\n2. `cd ngxp-groceries-app`\n3. `npm run ngxp-install`\n\n## Run Web application\n`npm start` - This will start the application at http://localhost:4200. \n\n## Run iOS Application\n- First start the simulator or connect the iOS device.\n- Execute `npm run start.ios` \n- **Note** - If you are using XCode8 then you need to set the DEVELPMENT_TEAM. There are two ways to set it.\n  1. Using XCode\n      - After executing `npm run start.ios` command, open project wordspace file nativescript/platforms/ios/nativescript.xcworkspace in XCode\n      - Click on nativescript project in XCode and set Team from General Tab.\n      - The issue with thie approach is, you need to set it everytime you remove and add the iOS platform.\n  2. From build.xconfig (preferable)\n      - Open nativescript/app/App_Resources/iOS/build.xconfig file.\n      - Uncomment `DEVELOPMENT_TEAM = YOUR_TEAM_ID;` line, and enter your team id.\n\n## Run Android Application\n- First start the emulator or connect the iOS device.\n- Execute `npm run start.android`\n\n## Commands\nYou can execute any valid command of angular-cli from `web/` folder and any valid command of nativescript-cli from `nativescript/` folder.\nFor convenince below are the commands which you can execute from root directory.\n\n### Common\n| Command                | Description                                                                                                                          |\n|------------------------|--------------------------------------------------------------------------------------------------------------------------------------|\n| npm run ngxp-install   | Installs dependencies of web and nativescript applications. Creates symlink of x-shared folder in both web and nativescript project. |\n\n### Web Application\n| Command                | Description                                                                                   |\n|------------------------|-----------------------------------------------------------------------------------------------|\n| npm start              | Starts web application at http://localhost:4200                                               |\n| npm run start.prod     | Starts web application in production mode. Runs uglification and minification.                |\n| npm run start.aot      | Performs AOT for web application templates and starts web application.                        |\n| npm run start.aot.prod | Performs AOT, minification, uglification and starts web application.                          |\n| npm run build          | Builds the web application and copy the built project in web/dist folder.                     |\n| npm run build.prod     | Builds the web application in production mode and copy the built project in web/dist folder.  |\n| npm run build.aot      | Performs AOT, build the project and then copy the built project in web/dist folder.           |\n| npm run build.aot.prod | Performs AOT, prepares production build and then copy the built project in web/dist folder.   |\n| npm test               | Runs web application and x-shared unit test cases. It will not generate code coverage report. |\n| npm run test-cc        | Runs web application and x-shared unit test cases and generates code coverage report.         |\n\n### Nativescript Application\n| Command                  | Description                                                                       |\n|--------------------------|-----------------------------------------------------------------------------------|\n| npm run start.ios        | Runs application on iOS emulator/device                                           |\n| npm run start.android    | Runs application on Android emulator/device                                       |\n| npm run clean.ios        | Cleans application on iOS emulator/device                                         |\n| npm run clean.android    | Cleans application on Android emulator/device                                     |\n| npm run restart.ios      | Cleans and restarts application on iOS emulator/device                            |\n| npm run restart.android  | Cleans and restarts application on Android emulator/device                        |\n| npm run test.ios         | Runs tests on iOS emulator/device. It will not generate code coverage report.     |\n| npm run test.android     | Runs tests on Android emulator/device. It will not generate code coverage report. |\n\n## Known Issues and Solution\n1. Angular dependencies at two levels for AOT support\n  - Currently we have added angular dependencies in root level package.json and web/package.json. Because, AOT does not work properly when we use path mapping and this issue is reported and can be traked at https://github.com/angular/angular-cli/issues/1732 and PR:https://github.com/angular/angular-cli/pull/2470. Once this issue is resolved we can add path mapping as shown below and remove the angular dependencies from web/package.json, so in case of any version update we just need to change the version at root directory level.\n\n    **web/src/tsconfig.json**\n    ```\n    \"paths\": {\n        \"@angular/*\": [\"../../node_modules/@angular/*\"]\n      }\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonogramm%2Fngxp-groceries-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonogramm%2Fngxp-groceries-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonogramm%2Fngxp-groceries-app/lists"}