{"id":22962151,"url":"https://github.com/actionanand/angular_with_docker","last_synced_at":"2026-04-27T18:34:54.359Z","repository":{"id":214878536,"uuid":"737575668","full_name":"actionanand/angular_with_docker","owner":"actionanand","description":"Creating angular 17 project without installing anything in host machine with the help of docker.","archived":false,"fork":false,"pushed_at":"2023-12-31T18:37:45.000Z","size":27,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-06T10:09:08.258Z","etag":null,"topics":["angular17","docker","docker-compose"],"latest_commit_sha":null,"homepage":"","language":"Dockerfile","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/actionanand.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":"2023-12-31T15:33:02.000Z","updated_at":"2023-12-31T15:37:07.000Z","dependencies_parsed_at":"2023-12-31T16:33:46.825Z","dependency_job_id":"4d4f276d-09b3-4dcc-a81c-4d7f614880a3","html_url":"https://github.com/actionanand/angular_with_docker","commit_stats":null,"previous_names":["actionanand/angular_with_docker"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/actionanand/angular_with_docker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fangular_with_docker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fangular_with_docker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fangular_with_docker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fangular_with_docker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/actionanand","download_url":"https://codeload.github.com/actionanand/angular_with_docker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fangular_with_docker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32349858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T17:12:42.749Z","status":"ssl_error","status_checked_at":"2026-04-27T17:12:41.658Z","response_time":128,"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":["angular17","docker","docker-compose"],"created_at":"2024-12-14T19:15:30.206Z","updated_at":"2026-04-27T18:34:54.344Z","avatar_url":"https://github.com/actionanand.png","language":"Dockerfile","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular with Docker\r\n\r\nCreating angular 17 project without installing anything in host machine with the help of docker.\r\n\r\n## Creating new project\r\n\r\n```shell\r\ndocker-compose run --rm ng new --directory ./ --skip-install\r\n```\r\n\r\n* Give your desired name for the project when prompted\r\n* Abort (CTR + C) if node package is getting installed\r\n\r\n* If `node_modules` folder was created, the error like the below screenshot will be thrown when trying to run `ng serve`. So delete it, if it got created.\r\n\r\n![image](https://github.com/actionanand/laravel_with_docker/assets/46064269/7510a83c-cafb-4b17-9e3d-179d704f2831)\r\n\r\n* Command to delete node_modules in Linux and wsl\r\n\r\n```bash\r\nrm -rf angular/node_modules\r\n```\r\n\r\n* Command to delete node_modules in powershell\r\n\r\n```powershell\r\nRemove-Item angular/node_modules -Recurse -Force\r\n```\r\n\r\n* Command to delete node_modules in command prompt\r\n\r\n```cmd\r\nrmdir angular\\node_modules\r\n```\r\n\r\n### Modifying package.json file\r\n\r\n* Add `\"ng-start\": \"ng serve --host 0.0.0.0\",` to `script` property in `package.json` file\r\n\r\n![image](https://github.com/actionanand/laravel_with_docker/assets/46064269/f3a14469-b781-48ec-ba7f-89891211c351)\r\n\r\n### Running dev server\r\n\r\n1. Spin-up the `vite` server\r\n\r\n```bash\r\ndocker-compose up -d --build server\r\n```\r\n\r\n`-d` to run in detached mode.\r\n\r\n2. Copy the `package-lock.json` to host machine\r\n\r\n    * Check running conatiner by `docker ps` and consider this last container name is `angular_with_docker_server_1`\r\n\r\n```bash\r\ndocker cp angular_with_docker_server_1:/app/package-lock.json angular\r\n```\r\n\r\n3. Point your browser to `http://localhost:4201/`\r\n\r\n4. After finished working,\r\n\r\n```bash\r\ndocker-compose down\r\n```\r\n\r\nto remove named volumes while removing container,\r\n\r\n```bash\r\ndocker-compose down -v\r\n```\r\n\r\n### Generating new component, service, etc using 'ng' command\r\n\r\n```bash\r\ndocker-compose run --rm ng g c pages/home\r\n```\r\n\r\n### Installing packages with 'ng add'\r\n\r\n* we can see example with `ng add @angular/pwa`. Other packages also uses the same way to be added!\r\n\r\n```bash\r\ndocker-compose run --rm ng add @angular/pwa\r\n```\r\n\r\n### Installing some third party npm packages\r\n\r\n1. Run `npm install` as below always\r\n\r\n```bash\r\ndocker-compose run --rm npm install\r\n```\r\n\r\n2. Installing `lodash` follows below:\r\n\r\n```bash\r\ndocker-compose run --rm npm install --save lodash\r\n```\r\n\r\n```bash\r\ndocker-compose run --rm npm install --save-dev @types/lodash\r\n```\r\n\r\nRemove `node_modules` after finishing it all.\r\n\r\n![image](https://github.com/actionanand/laravel_with_docker/assets/46064269/f0d40549-7809-487e-b64e-e645441174ec)\r\n\r\n![image](https://github.com/actionanand/laravel_with_docker/assets/46064269/555411d5-86de-42b5-88c3-a078adc192cf)\r\n\r\n* [How to import lodash in angular](https://stackoverflow.com/questions/41991178/correct-way-of-importing-and-using-lodash-in-angular/59908442#59908442)\r\n\r\n\r\n### Testing Angular app\r\n\r\n```bash\r\ndocker-compose up --build test\r\n```\r\n\r\n* Point your browser to `http://localhost:4203/`\r\n\r\n* Remove the container\r\n\r\n```bash\r\ndocker-compose down\r\n```\r\n\r\n### Running Angular app in SSR mode\r\n\r\n1. Building angular files\r\n\r\n```bash\r\ndocker-compose run --rm build run build\r\n```\r\n\r\n2. Running express server\r\n\r\n```bash\r\ndocker-compose run --rm build run serve:ssr:my_angular_play\r\n```\r\n\r\n* You can try any `script` in `package.json` after `npm` with `docker-compose run --rm build run`\r\n\r\n## Preparing to push to docker hub\r\n\r\n* Navigate to the folder where `angular.dockerfile` exists, then execute the below command\r\n\r\n1. Building the image for Angular 17\r\n\r\n```bash\r\ndocker build . -t actionanand/ng-create:17 -f angular.dockerfile\r\n```\r\n\r\n2. Pushing the Image\r\n\r\n```shell\r\ndocker push actionanand/ng-create:17\r\n```\r\n\r\n## Utilizing docker hub Image\r\n\r\n* Pull Angular 17\r\n\r\n```bash\r\ndocker pull actionanand/ng-create:17\r\n```\r\n\r\n* Creating new angular project\r\n\r\n```shell\r\ndocker run --rm -it --name ng-create -v \"folder_path:/app\" actionanand/ng-create:17 new\r\n```\r\n\r\nIn mac, linux or wsl2\r\n\r\n```shell\r\ndocker run --rm -it --name ng-create -v $(pwd):/app actionanand/ng-create:17 new \r\n```\r\n\r\nIn windows,\r\n\r\n```bash\r\ndocker run --rm -it --name ng-create -v \"D:\\AR_extra\\rnd\\docker\\test:/app\" actionanand/ng-create:17 new\r\n```\r\n\r\n* creating new Angular project in the current folder\r\n\r\n```bash\r\ndocker run --rm -it --name ng-create -v $(pwd):/app actionanand/ng-create:17 new --directory .\r\n```\r\n\r\n### Generating new component, service, etc\r\n\r\n* Creating `home` component under the folder `pages`\r\n```bash\r\ndocker run --rm -it --name ng-create -v $(pwd):/app actionanand/ng-create:17 g c pages/home\r\n```\r\n\r\n### Installing packages with 'ng add'\r\n\r\n* we can see example with `ng add @angular/pwa`. Other packages also uses the same way to be added!\r\n\r\n```bash\r\ndocker run --rm -it --name ng-create -v $(pwd):/app actionanand/ng-create:17 add @angular/pwa\r\n```\r\n\r\n### Some useful commands\r\n\r\n1. `docker container prune` - to remove all stopped containers\r\n2. `docker system prune` - to remove all stopped images. This command will remove all stopped containers, networks, and dangling images\r\n3. If you want to remove all images, not just the dangling ones, you can add the '-a' option to the command, like so:\r\n\r\n```bash\r\ndocker system prune -a\r\n```\r\n4. `docker volume prune` -  to remove unused volumes\r\n\r\n## Docker Image for creating angular project\r\n\r\n* [actionanand/ng-create](https://hub.docker.com/r/actionanand/ng-create)\r\n\r\n## Associated repos:\r\n\r\n1. [Docker Basics](https://github.com/actionanand/docker_playground)\r\n2. [Managing Data and working with volumes](https://github.com/actionanand/docker_data_volume)\r\n3. [Docker Communication](https://github.com/actionanand/docker_communication)\r\n4. [Docker Multi-container with docker-compose](https://github.com/actionanand/docker_multi-container)\r\n5. [Docker Utility Containers \u0026 Executing Commands](https://github.com/actionanand/node-util)\r\n6. [Laravel with Docker](https://github.com/actionanand/laravel_with_docker)\r\n7. [Angular with Docker](https://github.com/actionanand/angular_with_docker)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionanand%2Fangular_with_docker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factionanand%2Fangular_with_docker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionanand%2Fangular_with_docker/lists"}