{"id":21307355,"url":"https://github.com/jdegand/angular-17-dictionary-app","last_synced_at":"2026-05-10T05:31:38.825Z","repository":{"id":209392899,"uuid":"717919519","full_name":"jdegand/angular-17-dictionary-app","owner":"jdegand","description":"Angular 17 Conversion of my previous Angular Dictionary App","archived":false,"fork":false,"pushed_at":"2025-02-28T19:49:34.000Z","size":457,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T05:01:47.014Z","etag":null,"topics":["angular","angular-17","jest","live-link"],"latest_commit_sha":null,"homepage":"https://jdegand.github.io/angular-17-dictionary-app/","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/jdegand.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,"zenodo":null}},"created_at":"2023-11-13T01:09:03.000Z","updated_at":"2025-02-28T19:49:37.000Z","dependencies_parsed_at":"2023-12-31T00:25:29.002Z","dependency_job_id":"f4626073-6e54-483e-aee8-c790c8385e93","html_url":"https://github.com/jdegand/angular-17-dictionary-app","commit_stats":null,"previous_names":["jdegand/angular-17-dictionary-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jdegand/angular-17-dictionary-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-17-dictionary-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-17-dictionary-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-17-dictionary-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-17-dictionary-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/angular-17-dictionary-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-17-dictionary-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261978910,"owners_count":23239417,"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","angular-17","jest","live-link"],"created_at":"2024-11-21T16:31:31.812Z","updated_at":"2026-05-10T05:31:33.807Z","avatar_url":"https://github.com/jdegand.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular 17 Dictionary App\n\n[This](https://jdegand.github.io/angular-17-dictionary-app/) is a conversion of my previous [Angular Dictionary App](https://github.com/jdegand/angular-dictionary-app) to Angular 17.\n\n## Screenshots\n\n![Dark Mode](screenshots/angular-17-dictionary-app-1.png)\n\n***\n\n![Light Mode](screenshots/angular-17-dictionary-app-2.png)\n\n***\n\n## Built With\n\n- [Angular CLI](https://github.com/angular/angular-cli) version 17.0.0.\n- [Angular](https://angular.dev)\n- [Dictionary Api](https://dictionaryapi.dev)\n- [Jest](https://jestjs.io/)\n- [Early AI](https://www.startearly.ai/)\n\n## Thoughts\n\n- I created a new project and added all the necessary files from my previous repo.  I ran `ng generate @angular/core:control-flow` to update the template syntax of all components.  \n- 4 files were changed and only `word-details.component.html` had problems. Sidenote: The formatting of the returned code generated by Angular is slightly off.  Apparently, with the new version of Angular control flow, you can't combine async pipe with a `@for` of loop like you could with a `ngFor`.\n\n```javascript\n@if (errorResponse) {\n\u003cdiv class=\"app__error\"\u003e{{ errorResponse.message }}\u003c/div\u003e\n}\n\u003cdiv\u003e\n  @for (\n      word of word$ | async; track \n      word; let onlyFirstEntryWord = $first; let lastEntrySource = $last) {\n  \u003carticle\n   \n  \u003e\n    @if (onlyFirstEntryWord) {\n\u003csection class=\"article__heading\"\u003e\n      \u003cdiv class=\"article__heading__left\"\u003e\n        \u003ch1 class=\"article-h1\"\u003e{{ word.word }}\u003c/h1\u003e\n        \u003ch2\u003e{{ word.phonetic }}\u003c/h2\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"article__heading__right\"\u003e\n        @for (\n            phonetic of findAudio(word.phonetics); track \n            phonetic; let firstAudio = $first) {\n  \u003cdiv\n         \n        \u003e\n          @if (firstAudio) {\n\u003cdiv class=\"player-div\"\u003e\n            \u003capp-player audioSrc=\"{{ phonetic.audio }}\"\u003e\u003c/app-player\u003e\n          \u003c/div\u003e\n}\n        \u003c/div\u003e\n}\n      \u003c/div\u003e\n    \u003c/section\u003e\n}\n    @for (meaning of word.meanings; track meaning) {\n  \u003csection class=\"article__word__props\"\u003e\n      \u003capp-meaning [meaning]=\"meaning\"\u003e\u003c/app-meaning\u003e\n    \u003c/section\u003e\n}\n    @if (lastEntrySource) {\n\u003csection class=\"article__source\"\u003e\n      \u003ch4\u003eSource\u003c/h4\u003e\n      @for (el of word.sourceUrls; track el) {\n  \u003cdiv\u003e\n        \u003capp-source [source]=\"el\"\u003e\u003c/app-source\u003e\n      \u003c/div\u003e\n}\n    \u003c/section\u003e\n}\n  \u003c/article\u003e\n}\n\u003c/div\u003e\n```\n\n- Using the code above gives an error that reads: `Type '{}' must have a '[Symbol.iterator]()' method that returns an iterator.ngtsc(2488) error after running control-flow command`.  To see the error, you would need to revert `word-details` folder and `app.config` back to my original implementation.  See [my old repo](https://github.com/jdegand/angular-dictionary-app) for the code.  \n- I changed my approach to use fetch, withComponentInputBinding and await/async instead of HttpClient, queryParamMap and asyncPipe.\n\n## How to Use\n\nTo clone and run this application, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:\n\n```bash\n# Clone this repository\n$ git clone https://github.com/jdegand/angular-17-dictionary-app.git\n\n# Install dependencies\n$ npm install\n\n# Run the app and navigate to localhost:4200\n$ npm start\n```\n\n## Continued Development\n\n- Error Handling -\u003e using fetch etc -\u003e doesn't catchError\n- The form doesn't reset when you navigate back to the home page with the book icon.\n- Typescript typing -\u003e the returned objects from dictionary app previously had flaws so typing would have to be adjusted to accept `undefined` or `null` for problematic fields.\n- CORS issue -\u003e There is a possible server issue (CORS) that prevents audio from being played.  The API has had intermittent issues in the past and there have been issues with CORS in the past.  It could be related to the API provider.\n- I originally had no tests for this app so I added Jest and used [early AI](https://www.startearly.ai/) to generate tests.\n\n## Useful Resources\n\n- [Stack Overflow](https://stackoverflow.com/questions/36835123/how-do-i-pass-data-to-angular-routed-components) - how do i pass data to angular routed components\n- [YouTube](https://www.youtube.com/watch?v=5K10oYJ5Y-E) - HTTP in Angular - Learning Angular (Part 8)\n- [Stack Overflow](https://stackoverflow.com/questions/56092083/async-await-in-angular-ngoninit) - async await in angular ngOnInit\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fangular-17-dictionary-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Fangular-17-dictionary-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fangular-17-dictionary-app/lists"}