Skip to main content

Angular Development Guide

Overview​

This comprehensive guide covers Angular development for the Ink platform frontend, including project structure, component architecture, routing, state management, API integration, and authentication implementation.

Target Audience: Frontend developers
Prerequisites: TypeScript, Angular basics, RxJS fundamentals
Estimated Time: 60+ minutes

Prerequisites​

  • TypeScript knowledge
  • Angular 17+ fundamentals
  • RxJS and reactive programming
  • HTML/CSS/SCSS proficiency
  • Understanding of REST APIs

Angular Application Architecture​

Installation Steps​

1. Project Setup​

# Install Angular CLI globally
npm install -g @angular/cli@17

# Create new Angular project
ng new ink-frontend --routing --style=scss --strict

# Navigate to project
cd ink-frontend

# Install dependencies
npm install

2. Project Dependencies​

// filepath: /Users/jetstart/dev/jetrev/ink/frontend/package.json
{
  "name": "ink-frontend",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --configuration production",
    "test": "ng test",
    "lint": "ng lint"
  },
  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "rxjs": "^7.8.0",
    "tslib": "^2.6.0",
    "zone.js": "^0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.0",
    "@angular/cli": "^17.0.0",
    "@angular/compiler-cli": "^17.0.0",
    "@types/jasmine": "^5.1.0",
    "@types/node": "^20.0.0",
    "jasmine-core": "^5.1.0",
    "karma": "^6.4.0",
    "karma-chrome-launcher": "^3.2.0",
    "karma-coverage": "^2.2.0",
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "typescript": "~5.2.0"
  }
}

3. Angular Configuration​

// filepath: /Users/jetstart/dev/jetrev/ink/frontend/angular.json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ink-frontend": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "changeDetection": "OnPush"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ink-frontend",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                }
              ],
              "outputHashing": "all",
              "optimization": true,
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "buildOptimizer": true
            }
          }
        }
      }
    }
  }
}

Configuration​

Project Structure​