{"id":16081891,"url":"https://github.com/clashsoft/angular-gradle-demo","last_synced_at":"2025-10-22T22:31:18.170Z","repository":{"id":77072606,"uuid":"237102176","full_name":"Clashsoft/Angular-Gradle-Demo","owner":"Clashsoft","description":"A demo that shows how to integrate an Angular frontend in a Gradle project.","archived":true,"fork":false,"pushed_at":"2023-10-11T15:22:13.000Z","size":240,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-10T03:16:06.458Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/Clashsoft.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-29T23:22:53.000Z","updated_at":"2023-10-11T15:22:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"821d8f67-142c-410e-8905-f69af7dfac2d","html_url":"https://github.com/Clashsoft/Angular-Gradle-Demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Clashsoft/Angular-Gradle-Demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clashsoft%2FAngular-Gradle-Demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clashsoft%2FAngular-Gradle-Demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clashsoft%2FAngular-Gradle-Demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clashsoft%2FAngular-Gradle-Demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Clashsoft","download_url":"https://codeload.github.com/Clashsoft/Angular-Gradle-Demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clashsoft%2FAngular-Gradle-Demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280526638,"owners_count":26345535,"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-10-22T02:00:06.515Z","response_time":63,"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":[],"created_at":"2024-10-09T11:11:24.200Z","updated_at":"2025-10-22T22:31:18.165Z","avatar_url":"https://github.com/Clashsoft.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Gradle Plugin - Demo Project\n\n[![Build Status](https://travis-ci.org/Clashsoft/Angular-Gradle-Demo.svg?branch=master)](https://travis-ci.org/Clashsoft/Angular-Gradle-Demo)\n\nThis is a demo project for the [Angular Gradle plugin](https://github.com/Clashsoft/Angular-Gradle).\nFollow the steps below to integrate an Angular frontend into your Gradle project with the plugin.\n\n## Guide\n\n\u003e ⓘ In the below guide, `angular-gradle-demo` is a placeholder for your project name.\n\u003e It also assumes your backend server runs on port 4567 during development.\n\n### 1. Adding the plugin\n\nAdd the plugin to `build.gradle`:\n\n```groovy\nplugins {\n   // ...\n   id 'de.clashsoft.angular-gradle' version '0.1.6' \n}\n```\n\nIf you are using the legacy plugins DSL, check out the [plugin download page](https://plugins.gradle.org/plugin/de.clashsoft.angular-gradle).\n\n### 2. (optional) Set up Angular root directory\n\n\u003e ⓘ This is only needed if your Angular project is placed in a directory other than `src/main/angular`.\n\nSet the `appDir` property to your angular root path.\n\n```groovy\nangular {\n    appDir = 'angular/angular-gradle-demo'\n}\n```\n\n### 3. (optional) Set up Angular build output directory\n\n\u003e ⓘ This is only needed if your Angular project uses a different name than your Gradle project.\n\nSet the `outputDir` property to your Angular build output path.\nUsually, this is `\u003cangular-root\u003e/dist/\u003cangular-project-name\u003e`.\n\n```groovy\nangular {\n    // ...\n    outputDir = 'angular/angular-gradle-demo/dist/angular-gradle-demo'\n}\n```\n\n### 4. Add \"apiURL\" environment variables\n\nAdd the following property to the `environment` object in `\u003cangular-root\u003e/src/environments/environment.ts`:\n\n```typescript\nexport const environment = {\n  // ...\n  apiURL: 'localhost:4567',\n}\n```\n\nIn `\u003cangular-root\u003e/src/environments/environment.prod.ts`, add the same property, but with an empty value:\n\n```typescript\nexport const environment = {\n  // ...\n  apiURL: '',\n}\n```\n\nMake sure you prefix your API request URLs with this variable.\nIf you are already using an environment variable with a similar purpose, you can also keep that.\nThe name `apiURL` is only a suggestion here.\n\n### 5. Add \"environment.gradle.ts\"\n\nCreate a new file named `environment.gradle.ts` in `\u003cangular-root\u003e/src/environments`, with the following content:\n\n```typescript\nexport const environment = {\n  production: false,\n  apiURL: '',\n};\n```\n\nIf you are already an environment variable to prefix API request URLs, use that variable's name instead of `apiURL` here, too.\n\n### 6. Add \"gradle\" configuration to Angular config\n\nIn `angular.json`, add under `projects/angular-gradle-demo/architect/build/configurations`:\n\n```json\n            \"gradle\": {\n              \"fileReplacements\": [\n                {\n                  \"replace\": \"src/environments/environment.ts\",\n                  \"with\": \"src/environments/environment.gradle.ts\"\n                }\n              ]\n            },\n```\n\n### 7. Enable CORS in development mode on your backend server\n\nTo run and test frontend and backend separately, you need to run them on two different ports.\nThis was prepared with `apiURL` (or similar) already, but we also need to enable CORS so the requests are not blocked by the browser.\n\nWith the [Sparkjava](http://sparkjava.com/) backend server, you can use the following code:\n\n```java\nclass Main {\n    public static void main(String[] args) {\n        final Service service = Service.ignite();\n        service.port(...);\n        // if you are using Spark singleton APIs instead of Service, replace service.* calls below with Spark.* or static import\n\n        // define static files location\n        // needs to be done before enabling CORS!\n        service.staticFiles.location(\"/angular-gradle-demo\");\n\n        final boolean devMode = ...;\n        if (devMode) {\n            // enable CORS for static files (not handled by before(...) below)\n            service.staticFiles.header(\"Access-Control-Allow-Origin\", \"*\");\n\n            // enable CORS for non-static requests\n            before((req, res) -\u003e {\n                res.header(\"Access-Control-Allow-Origin\", \"*\");\n                res.header(\"Access-Control-Allow-Headers\", \"*\");\n            });\n\n            // allow CORS preflight for methods other than GET\n            options(\"/*\", (req, res) -\u003e {\n                String accessControlRequestHeaders = req.headers(\"Access-Control-Request-Headers\");\n                if (accessControlRequestHeaders != null) {\n                    res.header(\"Access-Control-Allow-Headers\", accessControlRequestHeaders);\n                }\n\n                String accessControlRequestMethod = req.headers(\"Access-Control-Request-Method\");\n                if (accessControlRequestMethod != null) {\n                    res.header(\"Access-Control-Allow-Methods\", accessControlRequestMethod);\n                }\n\n                return \"OK\";\n            });\n        }\n    }\n}\n```\n\n## Running\n\n\u003e ⓘ IntelliJ users can check out the [premade run configurations](.idea/runConfigurations).\n\n### Serving Frontend via Backend\n\nTo build the frontend and serve it via the backend, just run your main class manually.\nE.g., if you are using the `application` Gradle plugin, run `gradle run`.\n\nThis will build Angular in production mode, so the build may take a while and it will be hard to debug.\nTo build Angular in dev mode, use `gradle run -Pangular-dev`.\nEven in dev mode, Angular may take a while to build.\n\n### Serving Frontend and Backend separately\n\nTo run the backend without the frontend, run `gradle run -Pno-angular`.\nNow you can run just the frontend with `ng serve`. \nThis allows you to debug Angular as usual and is also quite fast.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclashsoft%2Fangular-gradle-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclashsoft%2Fangular-gradle-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclashsoft%2Fangular-gradle-demo/lists"}