https://github.com/jdegand/angular-17-dictionary-app
Angular 17 Conversion of my previous Angular Dictionary App
https://github.com/jdegand/angular-17-dictionary-app
angular angular-17 jest live-link
Last synced: 2 months ago
JSON representation
Angular 17 Conversion of my previous Angular Dictionary App
- Host: GitHub
- URL: https://github.com/jdegand/angular-17-dictionary-app
- Owner: jdegand
- Created: 2023-11-13T01:09:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-28T19:49:34.000Z (3 months ago)
- Last Synced: 2025-02-28T23:05:51.266Z (3 months ago)
- Topics: angular, angular-17, jest, live-link
- Language: TypeScript
- Homepage: https://jdegand.github.io/angular-17-dictionary-app/
- Size: 446 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular 17 Dictionary App
[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.
## Screenshots
***
***
## Built With
- [Angular CLI](https://github.com/angular/angular-cli) version 17.0.0.
- [Angular](https://angular.dev)
- [Dictionary Api](https://dictionaryapi.dev)
- [Jest](https://jestjs.io/)
- [Early AI](https://www.startearly.ai/)
## Thoughts
- 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.
- 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`.
```javascript
@if (errorResponse) {
{{ errorResponse.message }}
}
@for (
word of word$ | async; track
word; let onlyFirstEntryWord = $first; let lastEntrySource = $last) {
@if (onlyFirstEntryWord) {
{{ word.word }}
{{ word.phonetic }}
@for (
phonetic of findAudio(word.phonetics); track
phonetic; let firstAudio = $first) {
@if (firstAudio) {
}
}
}
@for (meaning of word.meanings; track meaning) {
}
@if (lastEntrySource) {
Source
@for (el of word.sourceUrls; track el) {
}
}
}
```
- 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.
- I changed my approach to use fetch, withComponentInputBinding and await/async instead of HttpClient, queryParamMap and asyncPipe.
## How to Use
To 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:
```bash
# Clone this repository
$ git clone https://github.com/jdegand/angular-17-dictionary-app.git
# Install dependencies
$ npm install
# Run the app and navigate to localhost:4200
$ npm start
```
## Continued Development
- Error Handling -> using fetch etc -> doesn't catchError
- The form doesn't reset when you navigate back to the home page with the book icon.
- Typescript typing -> the returned objects from dictionary app previously had flaws so typing would have to be adjusted to accept `undefined` or `null` for problematic fields.
- CORS issue -> 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.
- I originally had no tests for this app so I added Jest and used [early AI](https://www.startearly.ai/) to generate tests.
## Useful Resources
- [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
- [YouTube](https://www.youtube.com/watch?v=5K10oYJ5Y-E) - HTTP in Angular - Learning Angular (Part 8)
- [Stack Overflow](https://stackoverflow.com/questions/56092083/async-await-in-angular-ngoninit) - async await in angular ngOnInit