Skip to content

Commit a006adf

Browse files
bbodine1bbodine1
authored
angular upgrade 08 25 (#58)
* Upgrade Angular dependencies to version 20 and update build configurations. Refactor component templates for improved formatting and structure. Adjust TypeScript configuration for module resolution and include additional schematics for Angular components. * Update Angular dependencies in package.json and package-lock.json to versions 19.0.1 for @ng-bootstrap/ng-bootstrap and 14.0.0 for @sweetalert2/ngx-sweetalert2, ensuring compatibility with Angular 20. * Update Node and npm versions to 24.6.0 and 11.5.2 respectively in .nvmrc, package.json, and README.md. Pin dependencies to exact versions in package.json and package-lock.json for improved stability and reproducibility. Adjust mock server start dates and environment API URL for local development. * Refactor Angular configuration and components to support dynamic branding. Update angular.json to include new build configurations for different brands, adjust asset paths, and streamline polyfills. Modify header and employer details components to utilize BRAND_CONFIG for logo and template paths, enhancing flexibility. Clean up custom.scss by removing unnecessary max-width setting for larger breakpoints. * Refactor branding styles by replacing SCSS variables with CSS custom properties for improved theming flexibility. Update client-specific stylesheets for DC, MA, and ME to utilize the new variable structure, ensuring consistent branding across different regions. Clean up variable.scss to import client styles and remove redundant theme color definitions. * Update Dockerfile to point apt sources to the Debian archive due to Buster EOL, and disable Release file validity checks for successful updates and installations.
1 parent b9e559c commit a006adf

File tree

14 files changed

+276
-5
lines changed

14 files changed

+276
-5
lines changed

‎.docker/production/Dockerfile.gha‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,13 @@ ENV BUNDLER_VERSION=$BUNDLER_VERSION
1515

1616
# Only install what's needed that isn't in the base image
1717
# https://github.com/docker-library/ruby/blob/master/2.7/slim-buster/Dockerfile
18-
RUN apt-get update \
18+
# Buster is EOL; point apt sources to the Debian archive and disable
19+
# Release file validity checks so updates/installations work.
20+
RUN sed -i \
21+
-e 's|deb.debian.org/debian|archive.debian.org/debian|g' \
22+
-e 's|security.debian.org/debian-security|archive.debian.org/debian-security|g' \
23+
/etc/apt/sources.list \
24+
&& apt-get -o Acquire::Check-Valid-Until=false update \
1925
&& apt-get -yq dist-upgrade \
2026
&& apt-get install -y \
2127
fontconfig \

‎clients/html/.node-version‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
24.6.0

‎clients/html/.npmrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
engine-strict=true
2+
save-exact=true
3+
update-notifier=false
4+
fund=false

‎clients/html/FILE_REPLACEMENTS.md‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
### File replacements by Angular build configuration
2+
3+
This note summarizes current file replacements defined in `angular.json` and the simplified approach using a centralized brand config.
4+
5+
#### Current simplified replacements
6+
7+
- **me**
8+
- `src/app/brand.config.ts` → `src/app/brand.config.me.ts`
9+
- **ma** (default)
10+
- `src/app/brand.config.ts` → `src/app/brand.config.ma.ts`
11+
- **dc**
12+
- `src/app/brand.config.ts` → `src/app/brand.config.dc.ts`
13+
- **me-production**
14+
- `src/environments/environment.ts` → `src/environments/environment.prod.ts`
15+
- `src/app/brand.config.ts` → `src/app/brand.config.me.ts`
16+
- **ma-production**
17+
- `src/environments/environment.ts` → `src/environments/environment.prod.ts`
18+
- `src/app/brand.config.ts` → `src/app/brand.config.ma.ts`
19+
- **dc-production**
20+
- `src/environments/environment.ts` → `src/environments/environment.prod.ts`
21+
- `src/app/brand.config.ts` → `src/app/brand.config.dc.ts`
22+
23+
#### Using configuration flags
24+
25+
Build commands select replacements via `--configuration`:
26+
27+
- `ng serve --configuration=me`
28+
- `ng build --configuration=me`
29+
- `ng serve --configuration=dc`
30+
- `ng build --configuration=me-production`
31+
- `ng build --configuration=dc-production`
32+
33+
#### Brand configuration files
34+
35+
Each brand has its own config file that exports the same `BRAND_CONFIG` constant:
36+
37+
**`src/app/brand.config.ts`** (default - MA)
38+
39+
```typescript
40+
export const BRAND_CONFIG: BrandConfig = {
41+
logoPath: 'assets/images/mhc_logo.svg',
42+
faviconPath: 'assets/images/favicon.png',
43+
rosterTemplatePath: 'assets/roster_upload_template.xlsx',
44+
zipCodeDataPath: 'data/zipCode.json',
45+
};
46+
```
47+
48+
**`src/app/brand.config.me.ts`** (Maine)
49+
50+
```typescript
51+
export const BRAND_CONFIG: BrandConfig = {
52+
logoPath: 'assets/images/logo_me.svg',
53+
faviconPath: 'assets/images/favicon_me.png',
54+
rosterTemplatePath: 'assets/roster_upload_template_me.xlsx',
55+
zipCodeDataPath: 'data/zipCodeME.json',
56+
};
57+
```
58+
59+
**`src/app/brand.config.dc.ts`** (District of Columbia)
60+
61+
```typescript
62+
export const BRAND_CONFIG: BrandConfig = {
63+
logoPath: 'assets/images/mhc_logo.svg', // Keep default for now
64+
faviconPath: 'assets/images/favicon.png', // Keep default for now
65+
rosterTemplatePath: 'assets/roster_upload_template.xlsx', // Keep default for now
66+
zipCodeDataPath: 'data/zipCode.json', // Keep default for now
67+
};
68+
```
69+
70+
#### Implementation
71+
72+
Components now reference `BRAND_CONFIG` instead of hardcoded paths:
73+
74+
- `HeaderComponent` uses `BRAND_CONFIG.logoPath`
75+
- `EmployerDetailsComponent` exposes `brand = BRAND_CONFIG`
76+
- Template binds roster template link to `brand.rosterTemplatePath`
77+
78+
#### Benefits of this approach
79+
80+
- **Single file replacement**: Only swap `brand.config.ts` per brand
81+
- **No code changes needed**: Components automatically use the correct paths
82+
- **Easy maintenance**: Update paths in one place per brand
83+
- **Production builds**: Combine brand config + environment swap
84+
- **Future expansion**: Add new brand-specific assets by updating config files
85+
86+
#### Example npm scripts
87+
88+
```json
89+
{
90+
"scripts": {
91+
"start:me": "ng serve --configuration=me",
92+
"build:me": "ng build --configuration=me",
93+
"build:me:prod": "ng build --configuration=me-production",
94+
"start:dc": "ng serve --configuration=dc",
95+
"build:dc:prod": "ng build --configuration=dc-production"
96+
}
97+
}
98+
```
99+
100+
#### Next steps
101+
102+
1. Add brand-specific assets (logos, favicons, templates, zip code data)
103+
2. Update brand config files with correct paths
104+
3. Test builds with `--configuration` flags
105+
4. Consider adding brand-specific SCSS variables for theming

‎clients/html/angular.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,10 @@
120120
{
121121
"replace": "src/environments/environment.ts",
122122
"with": "src/environments/environment.prod.ts"
123+
},
124+
{
125+
"replace": "src/app/brand.config.ts",
126+
"with": "src/app/brand.config.me.ts"
123127
}
124128
],
125129
"optimization": true,
@@ -135,7 +139,7 @@
135139
}
136140
},
137141
"serve": {
138-
"builder": "@angular-devkit/build-angular:dev-server",
142+
"builder": "@angular/build:dev-server",
139143
"options": {
140144
"browserTarget": "quoting-tool:build"
141145
},
@@ -155,13 +159,13 @@
155159
}
156160
},
157161
"extract-i18n": {
158-
"builder": "@angular-devkit/build-angular:extract-i18n",
162+
"builder": "@angular/build:extract-i18n",
159163
"options": {
160164
"browserTarget": "quoting-tool:build"
161165
}
162166
},
163167
"test": {
164-
"builder": "@angular-devkit/build-angular:karma",
168+
"builder": "@angular/build:karma",
165169
"options": {
166170
"main": "src/test.ts",
167171
"polyfills": "src/polyfills.ts",

‎clients/html/src/app/brand.config.dc.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { BrandConfig } from './brand.types';
2+
3+
export const BRAND_CONFIG: BrandConfig = {
4+
// DC (District of Columbia) brand configuration
5+
logoPath: 'assets/images/mhc_logo.svg', // Keep default logo for now
6+
faviconPath: 'assets/images/favicon.png', // Keep default favicon for now
7+
rosterTemplatePath: 'assets/roster_upload_template.xlsx', // Keep default template for now
8+
zipCodeDataPath: 'data/zipCode.json', // Keep default zip codes for now
9+
};

‎clients/html/src/app/brand.config.ma.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { BrandConfig } from './brand.types';
2+
3+
export const BRAND_CONFIG: BrandConfig = {
4+
// MA (Maine) brand configuration - default
5+
logoPath: 'assets/images/mhc_logo.svg',
6+
faviconPath: 'assets/images/favicon.png',
7+
rosterTemplatePath: 'assets/roster_upload_template.xlsx',
8+
zipCodeDataPath: 'data/zipCode.json',
9+
};

‎clients/html/src/app/brand.config.me.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { BrandConfig } from './brand.types';
2+
3+
export const BRAND_CONFIG: BrandConfig = {
4+
// ME (Maine) brand configuration
5+
logoPath: 'assets/images/logo_me.svg',
6+
faviconPath: 'assets/images/favicon_me.png',
7+
rosterTemplatePath: 'assets/roster_upload_template_me.xlsx',
8+
zipCodeDataPath: 'data/zipCodeME.json',
9+
};

‎clients/html/src/app/brand.config.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { BrandConfig } from './brand.types';
2+
3+
export const BRAND_CONFIG: BrandConfig = {
4+
// Default brand: MA (Maine)
5+
logoPath: 'assets/images/mhc_logo.svg',
6+
faviconPath: 'assets/images/favicon.png',
7+
rosterTemplatePath: 'assets/roster_upload_template.xlsx',
8+
zipCodeDataPath: 'data/zipCode.json',
9+
};

‎clients/html/src/app/brand.types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export interface BrandConfig {
2+
logoPath: string;
3+
faviconPath: string;
4+
rosterTemplatePath: string;
5+
zipCodeDataPath: string;
6+
}

0 commit comments

Comments
 (0)