Angular Futurama Wiki

This is an Angular conversion of my React Futurama Fan Wiki.

Screenshots

---

---

Built With

• Angular
• Angular CLI version 17.0.3.
• Futurama API

Thoughts

• I converted this specifically to use Cypress' intercept method.
• If you were to add SSR or SSG, the intercept method won't work without modification.
• I haven't found a good example of Angular SSR testing yet.
• If you pass an id that doesn't exist on the API, the detail page renders nothing. I used an @else block but that would flash until the API request completed.
• Could refactor to use httpClient and catchError or improve the fetch implementation with a try / catch ?
• I limited the amount of character sayings returned in the @for loop by adding slice (character.sayings.slice(0,5)).

Continued Development

• Fetch error handling
• You could use head-shot for the alt tag. I think all head-shots are empty strings.

Useful Resources

• transform - json to typescript
• CSS Reset - a more modern css reset
• tektutorialshub - angular folder structure best practices
• Stack Overflow - async await in angular ngOnInit
• Github - sourceMap error when you don't add a tsconfig.json file inside the cypress folder
• Cypress Docs - configure tsconfig.json
• Web.dev - fetch api error handling
• Sentry - how do I test for an empty js object
• YouTube - You might be using fetch with async/await wrong...
• Stack Overflow - how can i limit ngFor repeat to some number of items in angular