{"id":19641766,"url":"https://github.com/layzeedk/nx-tiny-app-project","last_synced_at":"2025-04-28T12:31:37.202Z","repository":{"id":38587047,"uuid":"249071849","full_name":"LayZeeDK/nx-tiny-app-project","owner":"LayZeeDK","description":"Tiny Angular application project in an Nx workspace.","archived":false,"fork":false,"pushed_at":"2023-01-07T16:12:24.000Z","size":1339,"stargazers_count":46,"open_issues_count":21,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-01T18:04:35.705Z","etag":null,"topics":["angular","nx","workspace"],"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/LayZeeDK.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"LayZeeDK"}},"created_at":"2020-03-21T22:27:31.000Z","updated_at":"2024-01-07T21:06:59.000Z","dependencies_parsed_at":"2023-02-07T15:01:46.940Z","dependency_job_id":null,"html_url":"https://github.com/LayZeeDK/nx-tiny-app-project","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/LayZeeDK%2Fnx-tiny-app-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayZeeDK%2Fnx-tiny-app-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayZeeDK%2Fnx-tiny-app-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayZeeDK%2Fnx-tiny-app-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LayZeeDK","download_url":"https://codeload.github.com/LayZeeDK/nx-tiny-app-project/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224115712,"owners_count":17258238,"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","nx","workspace"],"created_at":"2024-11-11T14:10:20.956Z","updated_at":"2024-11-11T14:10:21.969Z","avatar_url":"https://github.com/LayZeeDK.png","language":"TypeScript","readme":"# Tiny Angular application project in an Nx workspace.\n1. `npx create-nx-workspace workspace --cli=angular --preset=angular --appName=tiny-app --style=scss`\n2. `nx update @angular/cli @angular/core`\n\n## Assets workspace library\n1. `nx generate library assets --directory=shared --tags=\"scope:shared,type:assets\" --style=scss`\n2. Remove the architect targets (`lint` and `test`) of the `shared-assets` project in `angular.json`:\n```json\n{\n  \"projects\": {\n    \"shared-assets\": {\n      \"architect\": {}\n    }\n  }\n}\n```\n3. `npx rimraf ./apps/tiny-app/src/assets ./libs/shared/assets/*.js ./libs/shared/assets/*.json ./libs/shared/assets/src/*.* ./libs/shared/assets/src/lib`\n4. `\"# shared-assets\" \u003e ./libs/shared/assets/README.md`\n5. `npx mkdirp ./libs/shared/assets/src/assets/fonts ./libs/shared/assets/src/assets/icons ./libs/shared/assets/src/assets/images`\n6.\n```bash\n\"\" \u003e ./libs/shared/assets/src/assets/fonts/.gitkeep\n\"\" \u003e ./libs/shared/assets/src/assets/icons/.gitkeep\n\"\" \u003e ./libs/shared/assets/src/assets/images/.gitkeep\n```\n7. `mv ./apps/tiny-app/src/favicon.ico ./libs/shared/assets/src`\n8. In the `build` architect target of the `tiny-app` project in `angular.json`, replace the `assets` option with these two entries:\n```json\n{\n  \"projects\": {\n    \"tiny-app\": {\n      \"architect\": {\n        \"build\": {\n          \"options\": {\n            \"assets\": [\n              {\n                \"glob\": \"favicon.ico\",\n                \"input\": \"libs/shared/assets/src\",\n                \"output\": \"\"\n              },\n              {\n                \"glob\": \"**/*\",\n                \"input\": \"libs/shared/assets/src/assets\",\n                \"output\": \"assets\"\n              }\n            ]\n          }\n        }\n      }\n    }\n  }\n}\n```\n9. `npx -p wget-improved nwget https://nx.dev/assets/images/nx-logo-white.svg -O ./libs/shared/assets/src/assets/images/nx-logo-white.svg`\n10. In `app.component.html`, replace the `src` attribute of the logo image element with `\"/assets/images/nx-logo-white.svg\"`.\n\n## Styles workspace library\n1. `nx generate library styles --directory=shared --tags=\"scope:shared,type:styles\" --style=scss`\n2. Remove the architect targets (`lint` and `test`) of the `shared-styles` project in `angular.json`:\n```json\n{\n  \"projects\": {\n    \"shared-styles\": {\n      \"architect\": {}\n    }\n  }\n}\n```\n3. `npx rimraf ./libs/shared/styles/*.js ./libs/shared/styles/*.json ./libs/shared/styles/src/*.* ./libs/shared/styles/src/lib/*.*`\n4. `\"# shared-styles\" \u003e ./libs/shared/styles/README.md`\n5. `mv ./apps/tiny-app/src/styles.scss ./libs/shared/styles/src/lib/_global.scss`\n6. `\"@import './lib/global';\" \u003e ./libs/shared/styles/src/index.scss`\n7. In the `build` architect target of the `tiny-app` project in `angular.json`, replace the `styles` option with this entry:\n```json\n{\n  \"projects\": {\n    \"tiny-app\": {\n      \"architect\": {\n        \"build\": {\n          \"options\": {\n            \"styles\": [\n              \"libs/shared/styles/src/index.scss\"\n            ]\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n## Environments workspace library\n1. `nx generate library environments --directory=shared --tags=\"scope:shared,type:environments\" --style=scss`\n2. `npx rimraf ./libs/shared/environments/src/lib/*.*`\n3. `mv ./apps/tiny-app/src/environments/*.* ./libs/shared/environments/src/lib`\n4. `\"export * from './lib/environment';\" \u003e ./libs/shared/environments/src/index.ts`\n5. `npx rimraf ./apps/tiny-app/src/environments`\n6. In the `build` architect target of the `tiny-app` project in `angular.json`, replace the `fileReplacements` option in the `production` configuration with this entry:\n```json\n{\n  \"projects\": {\n    \"tiny-app\": {\n      \"architect\": {\n        \"build\": {\n          \"configurations\": {\n            \"production\": {\n              \"fileReplacements\": [\n                {\n                  \"replace\": \"libs/shared/environments/src/lib/environment.ts\",\n                  \"with\": \"libs/shared/environments/src/lib/environment.prod.ts\"\n                }\n              ]\n            }\n          }\n        }\n      }\n    }\n  }\n}\n```\n7. In `main.ts`, replace the environment import statement with the following:\n```typescript\nimport { environment } from '@workspace/shared/environments';\n```\n\n## Configure Nx workspace\n1. Add these two `implicitDependencies` entries to the `tiny-app` project in `nx.json`:\n```json\n{\n  \"projects\": {\n    \"tiny-app\": {\n      \"implicitDependencies\": [\n        \"shared-assets\",\n        \"shared-styles\"\n      ]\n    }\n  }\n}\n```\n","funding_links":["https://github.com/sponsors/LayZeeDK"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flayzeedk%2Fnx-tiny-app-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flayzeedk%2Fnx-tiny-app-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flayzeedk%2Fnx-tiny-app-project/lists"}