Code-Sage

Angular App Enhancement and Dependency Maintenance

23 Jul 2023

Angular

Objective

Enhance existing angular application to improve productivity and accessibility (keyboard navigation).

Technical Goals/Overview

Dependency maintenance and management (update software package versions) for existing Angular project. Add support for keyboard navigation and accessibility.

Summary: Technical Implementation

  1. Update Angular Project to build, test, and execute using latest Angular 16:
    • Update angular dependencies.
    • Update application code to function with latest supported Typescript.
    • Replace deprecated 3rd party dependencies with supported dependencies.
    • Ensure application retains previous form and functionality.
    • Update tests to function with latest dependencies.
  2. Support keyboard navigation and accessibility:
    • Allow users to quickly and consistently navigate application using keyboard without use of mouse.
    • Consider multiple os and browser combinations.
    • Ensure the layout remains responsive and mobile-friendly.
  3. CI/CD Process Pipeline:
    • Facilitate continuous rapid local development and testing. Code changes trigger local build and test.
    • update GitHub Actions build and test with latest dependencies.

Overall, the technical implementation focused on successfully navigating and trouble shooting issues (dependency deprecation, typescript) encountered to continue development and long term support of angular application. Additionally, add support for keyboard navigation and accessibility in the angular application.

Skills Footprint:

Category Technical Specifics
general Web Development * Angular Development
standards HTML * CSS * JSON * Typescript
tools VSCode * GIT * NPM * Angular CLI * Karma * Jasmine
concepts Single Page Application * Dependency Maintenance and Management * Responsive Design * CI/CD
packages Angular * Angular Material
deployment Github Actions

Related posts