Skip to content

Wave 1: Upgrade core framework + build config from Angular 9 to Angular 21 #421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tobydrinkall wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Wave 1: Upgrade core framework + build config from Angular 9 to Angular 21 #421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
20da96a
Upgrade core framework and build config from Angular 9 to Angular 21
devin-ai-integration[bot] Jul 2, 2026
d0b070b
Point Firebase hosting at application builder output directory
devin-ai-integration[bot] Jul 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 22 additions & 20 deletions angular.json
View file
Open in desktop

@devin-ai-integration devin-ai-integration Bot Jul 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚩 Deprecated tooling configs retained (tslint, protractor)

The angular.json still references @angular-devkit/build-angular:tslint (angular.json:106) and @angular-devkit/build-angular:protractor (angular.json:119). Both tslint and protractor have been deprecated for years — tslint was superseded by eslint, and protractor was removed from Angular CLI in v15. The package.json still lists tslint (package.json:47) and protractor (package.json:45) as devDependencies. While these won't break the build, ng lint and ng e2e will likely fail at runtime since the builders may not exist in @angular-devkit/build-angular v21. Consider migrating to @angular-eslint and a modern e2e framework like Cypress or Playwright.

(Refers to lines 105-129)

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

@devin-ai-integration devin-ai-integration Bot Jul 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Intentional: the TSLint → ESLint migration and removal of the protractor e2e setup are Wave 4 of this migration and are being handled in a follow-up PR based on this branch. This foundational PR only targets a green npm run build.

Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,12 @@
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"builder": "@angular-devkit/build-angular:application",
"options": {
"aot": true,
"outputPath": "dist/angular-hnpwa",
Comment thread
devin-ai-integration[bot] marked this conversation as resolved.
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"browser": "src/main.ts",
"polyfills": ["src/polyfills.ts"],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
Expand All @@ -45,12 +44,8 @@
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": true,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
Expand All @@ -62,33 +57,38 @@
"maximumWarning": "6kb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
"serviceWorker": "ngsw-config.json"
Comment thread
tobydrinkall marked this conversation as resolved.
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
}
},
"defaultConfiguration": "production"

@devin-ai-integration devin-ai-integration Bot Jul 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 Info: Build default changed from development to production

The build target now has "defaultConfiguration": "production" (angular.json:68), meaning ng build (and therefore npm run build) will produce a production build by default. Previously with the browser builder and no defaultConfiguration, ng build ran without any configuration applied. This is the standard convention for modern Angular projects but is a behavioral change worth noting — all ng build invocations will now apply production optimizations, file replacements, and service worker registration unless explicitly overridden.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angular-hnpwa:build"
},
"configurations": {
"production": {
"browserTarget": "angular-hnpwa:build:production"
"buildTarget": "angular-hnpwa:build:production"
},
"development": {
"buildTarget": "angular-hnpwa:build:development"
}
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular-hnpwa:build"
"buildTarget": "angular-hnpwa:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"polyfills": ["zone.js", "zone.js/testing"],
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
Expand Down Expand Up @@ -130,5 +130,7 @@
}
}
},
"defaultProject": "angular-hnpwa"
"cli": {
"analytics": false
}
}
2 changes: 1 addition & 1 deletion firebase.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"rules": "database.rules.json"
},
"hosting": {
"public": "dist",
"public": "dist/angular-hnpwa/browser",

@devin-ai-integration devin-ai-integration Bot Jul 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 Info: Application builder output path structure change affects deployment

The application builder outputs client files to dist/angular-hnpwa/browser/ rather than the old browser builder's dist/angular-hnpwa/. The firebase.json was correctly updated to dist/angular-hnpwa/browser (firebase.json:6). However, any other deployment scripts, CI pipelines, or documentation referencing the old dist/ or dist/angular-hnpwa/ path would need updating. The CONTRIBUTING.md at step 10 references updating the dist/ directory, which is now stale but is guidance text rather than executable code.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

"rewrites": [
{
"source": "**",
Expand Down
12 changes: 8 additions & 4 deletions karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,20 @@ module.exports = function (config) {
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
coverageReporter: {
dir: require('path').join(__dirname, './coverage/angular-hnpwa'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'lcovonly' },
{ type: 'text-summary' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
Expand Down
Loading