[Hackathon] Replace Moment.js/ngx-moment with date-fns

[rsdmike]

🔹 Overview

The sample-web-ui project currently uses Moment.js and ngx-moment for date manipulation and formatting, but Moment.js is a bit old.

Additionally, Moment.js is not fully ESM-compatible, leading to optimization bailouts in our Angular site. To modernize our date handling, improve bundle size, and maintain future compatibility, we want to migrate to date-fns.

Benefits of date-fns:

• Lightweight & modular: Import only what you need.
• ESM-friendly: Avoids Angular optimization bailouts.
• Well-maintained: Regular updates and active community.

---

🎯 Task Scope

• Step 1: Remove moment and ngx-moment dependencies:

  npm uninstall moment ngx-moment

• Step 2: Install date-fns:

  npm install date-fns

• Step 3: Identify all usages of Moment.js in the project:
  • Date parsing and formatting
  • Relative time (fromNow(), calendar())
  • Date manipulation (add, subtract, startOf, endOf)
• Step 4: Replace Moment.js code with equivalent date-fns functions:

  import { format, parseISO, addDays, formatDistanceToNow } from 'date-fns'

• Step 5: Test all date-related functionality in:
  • UI components that display dates.
  • Date pipes (if applicable).
  • Services or utilities performing date calculations.
• Step 6: Clean up any Moment.js-specific imports or references in:
  • angular.json
  • tsconfig.json
  • Other config files (e.g., webpack, build tools)

---

📂 Relevant Files

• src/app/**/*.ts (look for moment imports)
• src/app/**/*.html (look for ngx-moment usage)
• package.json (dependency cleanup)
• angular.json, tsconfig.json (ensure no Moment.js remnants)

---

💻 Technical Details

• Common Replacements:

  // Before (Moment.js)
  moment().format('YYYY-MM-DD')
  moment().fromNow()
  moment(date).add(7, 'days')
  
  // After (date-fns)
  import { format, formatDistanceToNow, addDays } from 'date-fns'
  
  format(new Date(), 'yyyy-MM-dd')
  formatDistanceToNow(new Date())
  addDays(new Date(), 7)

• Avoid Common Pitfalls:
  • Ensure timezone handling is not affected if Moment was being used for this purpose.
  • Test for edge cases like DST changes, UTC vs. local time, etc.
• Performance Consideration: Use ESM imports like:

  import { parseISO, format } from 'date-fns'

---

✅ Acceptance Criteria

• All Moment.js and ngx-moment references are fully removed.
• date-fns is correctly implemented for all date-related code.
• No optimization bailouts related to Moment.js in the Angular build.
• All unit tests pass and date-related functionality works as expected.
• A Pull Request (PR) is submitted with a clear summary of changes.

---

🚀 How to Get Started

1. Comment below to claim this issue.
2. Fork the repo and create a branch (e.g., feature/replace-moment-with-date-fns).
3. Implement the date-fns migration following the outlined scope.
4. Submit a Pull Request (PR) linking this issue.

---

📎 Additional Notes

• This task may touch many files, so keep PRs small and focused if possible.
• Consider using search tools (e.g., VS Code global search) to find all moment references.
• If you encounter edge cases, please document them in the PR description.

[DanielMoya-Intel]

OpenAMT_Team1 will be taking this issue