Restructure Angular training scaffold and harden dependencies to patched Angular 19.2.x

[Copilot]

This PR converts the repository from a loose training note into a usable Angular project baseline and updates dependency versions to remediate reported Angular security advisories. It adds the missing application/config/doc scaffolding while keeping a module-based training structure.

• README and documentation overhaul

  • Rewrote README.md for scanability: badges, quick start, TOC, setup flow, project layout, development steps, conventions, troubleshooting, backend links, and resources.
  • Added SETUP.md and CONTRIBUTING.md with practical contributor/setup guidance.

• Angular project foundation (missing files created)

  • Added core app entry files: src/main.ts, src/index.html, src/styles.css.
  • Added root app files: app.component.ts/html/css, app.module.ts, app-routing.module.ts.
  • Added users feature module scaffold:
    • users.module.ts, users-routing.module.ts
    • model/user.model.ts
    • services/users.service.ts
    • crud and user-card components (TS/HTML/CSS)

• Config and tooling baseline

  • Added root configs: angular.json, package.json, tsconfig.json.
  • Added test bootstrap/config: karma.conf.js, tsconfig.spec.json, src/test.ts.
  • Kept .gitignore aligned with Angular/Node artifacts.

• Security remediation: Angular dependency line upgrade

  • Upgraded Angular packages from 14.x to patched 19.2.x line (including CLI/build/compiler toolchain and compatible zone.js/TypeScript).
  • Applied Angular 19 compatibility adjustments for module-based declarations (standalone: false where required).

@Component({
  selector: 'app-user-card',
  standalone: false,
  templateUrl: './user-card.component.html',
  styleUrls: ['./user-card.component.css']
})
export class UserCardComponent {
  @Input() user!: UserModel;
}

• • UI preview: https://github.com/user-attachments/assets/8b67720b-3171-43fd-9984-a02ab7b8b68e

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• accounts.google.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4409 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-33235781 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,7295521390367403361,5161547598620288695,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,836901626110418661,14454986158081107650,4 --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-33235781 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=33235781 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4561 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-10070040 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,5805617620900292575,17494403319622945190,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,12127507455085185423,1345859582759573969,4 --trace-process-track-uuid=3190708989122997041 (dns block)
• clients2.google.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4409 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-33235781 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,7295521390367403361,5161547598620288695,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,836901626110418661,14454986158081107650,4 --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-33235781 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=33235781 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4561 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-10070040 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,5805617620900292575,17494403319622945190,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,12127507455085185423,1345859582759573969,4 --trace-process-track-uuid=3190708989122997041 (dns block)
• clientservices.googleapis.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4409 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-33235781 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,7295521390367403361,5161547598620288695,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,836901626110418661,14454986158081107650,4 --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-33235781 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=33235781 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4561 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-10070040 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,5805617620900292575,17494403319622945190,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,12127507455085185423,1345859582759573969,4 --trace-process-track-uuid=3190708989122997041 (dns block)
• redirector.gvt1.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4409 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-33235781 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,7295521390367403361,5161547598620288695,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,836901626110418661,14454986158081107650,4 --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-33235781 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=33235781 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4561 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-10070040 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,5805617620900292575,17494403319622945190,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,12127507455085185423,1345859582759573969,4 --trace-process-track-uuid=3190708989122997041 (dns block)
• safebrowsingohttpgateway.googleapis.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4409 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-33235781 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,7295521390367403361,5161547598620288695,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,836901626110418661,14454986158081107650,4 --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-33235781 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=33235781 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4561 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-10070040 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,5805617620900292575,17494403319622945190,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,12127507455085185423,1345859582759573969,4 --trace-process-track-uuid=3190708989122997041 (dns block)
• www.google.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4409 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-33235781 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,7295521390367403361,5161547598620288695,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,836901626110418661,14454986158081107650,4 --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-33235781 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=33235781 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4561 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-10070040 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,5805617620900292575,17494403319622945190,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,12127507455085185423,1345859582759573969,4 --trace-process-track-uuid=3190708989122997041 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Task: Optimize README and Establish Angular Project Structure

Current State

The repository contains a basic README with Angular training content but lacks proper organization and complete project structure.

Requirements

1. Optimize README.md

• Improve formatting and readability with proper markdown structure
• Add a comprehensive table of contents
• Better organize sections (Setup, Project Structure, Development Steps)
• Add badges for Angular versions and status
• Include quick start guide at the top with clear instructions
• Add contribution guidelines and resources
• Improve code block syntax highlighting
• Add links to related backend API repositories
• Fix formatting issues (inconsistent indentation, code block syntax)
• Add troubleshooting section
• Include best practices and conventions

2. Create Essential Project Files and Structure

Create the following files in the src/ directory to establish a proper Angular project foundation:

Core Application Files:

• src/main.ts - Application bootstrap file with proper imports
• src/index.html - Main HTML entry point with title and root component
• src/styles.css - Global styles with Bootstrap import
• src/app/app.component.ts - Root component TypeScript with navigation
• src/app/app.component.html - Root component template with navbar and router outlet
• src/app/app.component.css - Root component styles

Modules and Features:

• src/app/users/users.module.ts - Users feature module with imports
• src/app/users/users-routing.module.ts - Users routing configuration (all, create routes)
• src/app/users/model/user.model.ts - User data model/interface
• src/app/users/services/users.service.ts - API service for CRUD operations

Components:

• src/app/users/crud/crud.component.ts - Main CRUD list component
• src/app/users/crud/crud.component.html - CRUD template with list display
• src/app/users/crud/crud.component.css - CRUD styles
• src/app/users/user-card/user-card.component.ts - User card component with @input
• src/app/users/user-card/user-card.component.html - User card template with bootstrap styling
• src/app/users/user-card/user-card.component.css - User card styles

Configuration Files:

• angular.json - Angular CLI configuration
• package.json - Project dependencies with Angular, Bootstrap, RxJS
• tsconfig.json - TypeScript configuration
• .gitignore - Git ignore rules

Documentation:

• CONTRIBUTING.md - Contribution guidelines
• SETUP.md - Detailed setup and installation guide

All files should follow Angular best practices (v13/14 and v21), use proper TypeScript typing, include necessary imports, and be production-ready.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: optimise reamde file, then make necessary code and files in src project

Assistant: I'll help you optimize the README file and make necessary improvements to the src project. Let me start by examining the repository structure and current README.

Assistant: Now I'll create an optimized README file and generate necessary files for the src project structure.

Assistant: I'm waiting for your approval to proceed with creating the pull request that will optimize the README and establish the complete Angular project structure with all necessary files and components.

User: @copilot Accepted Confirmation: Confirm agent session

User: @copilot Accepted Confirmation: Confirm agent session

Assistant: Perfect! I've started the Copilot coding agent to work on your Angular project. The agent will:

📋 README Optimization:

• Restructure with a table of contents
• Add Angular version badges and status indicators
• Organize sections logically (Setup → Project Structure → Development)
• Fix formatting inconsistencies
• Add troubleshooting and best practices
• Include contribution guidelines

📁 Complete Project Structure in src/:

Core Files:

• Application bootstrap (main.ts)
• Index HTML with root component
• Global styles with Bootstrap
• App component (TypeScript, HTML, CSS)

Users Module:

• Module and routing configuration
• User model/interface
• Users API service with CRUD operations
• CRUD component (list users)
• User card component (display individual users)

Configuration:

• Angular.json configuration
• Package.json with dependencies
• TypeScript configuration
• .gitignore setup

Documentation:

• Enhanced README.md
• SETUP.md guide
• CONTRIBUTING.md guidelines

The agent is now working autonomously to create a production-ready Angular training project structure. You'll be able to track the progress through the task workflow.

This pull request was created from Copilot chat.