Angular 18

angular.json

@@ -49,11 +49,12 @@
          "prefix": "",
          "architect": {
             "build": {
-               "builder": "@angular-devkit/build-angular:browser-esbuild",
+               "builder": "@angular-devkit/build-angular:application",
                "options": {
-                  "outputPath": "dist/sandbox",
+                  "outputPath": {
+                     "base": "dist/sandbox"
+                  },
                   "index": "projects/sandbox/src/index.html",
-                  "main": "projects/sandbox/src/main.ts",
                   "polyfills": ["zone.js"],
                   "tsConfig": "projects/sandbox/tsconfig.app.json",
                   "inlineStyleLanguage": "scss",
@@ -65,7 +66,8 @@
                      "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
                      "projects/sandbox/src/styles.scss"
                   ],
-                  "scripts": []
+                  "scripts": [],
+                  "browser": "projects/sandbox/src/main.ts"
                },
                "configurations": {
                   "production": {
@@ -90,7 +92,6 @@
                      "outputHashing": "all"
                   },
                   "development": {
-                     "buildOptimizer": false,
                      "optimization": false,
                      "extractLicenses": false,
                      "sourceMap": true

eslint.config.js

@@ -3,7 +3,7 @@ import { problemRules } from "./eslint/core/problems.js";
 import { suggestionRules } from "./eslint/core/suggestions.js";
 import { extensionRulesForTypescript } from "./eslint/typescript/extension-rules.js";
 import { typescriptRules } from "./eslint/typescript/typescript-rules.js";
-import tseslint from "typescript-eslint";
+import tsEslint from "typescript-eslint";
 import commentDirectivesPlugin from "eslint-plugin-eslint-comments";
 import { angularTemplateRules } from "./eslint/angular/angular-eslint_template.js";
 import * as templateParser from "@angular-eslint/template-parser";
@@ -42,14 +42,14 @@ export default [
    {
       files: ["**/*.ts"],
       languageOptions: {
-         parser: tseslint.parser,
+         parser: tsEslint.parser,
          parserOptions: {
             ecmaVersion: "latest",
             project: ["tsconfig.eslint.json"]
          }
       },
       plugins: {
-         typescript: tseslint.plugin,
+         typescript: tsEslint.plugin,
          directives: commentDirectivesPlugin,
          angular: angularPlugin,
          import: importPlugin

eslint/angular/angular-eslint.js

@@ -281,15 +281,6 @@ export const angularRules = {
     */
    "angular/directive-selector": [2, { type: "attribute", style: "camelCase" }],
 
-   /**
-    * Disallows usage of the host metadata property
-    *
-    * @remarks
-    * Angular encourages use of @HostBinding() and @HostListener() instead.
-    * See https://angular.io/styleguide#style-06-03
-    */
-   "angular/no-host-metadata-property": "error",
-
    /**
     * Disallows usage of the inputs metadata property
     *
@@ -367,5 +358,8 @@ export const angularRules = {
     * This is off for now because it isn't a priority, but I would like to
     * revisit in the future.
     */
-   "angular/consistent-component-styles": "off"
+   "angular/consistent-component-styles": "off",
+
+   /** Ensures that decorator metadata arrays do not contain duplicate entries. */
+   "angular/no-duplicates-in-metadata-arrays": "error"
 };

eslint/angular/angular-eslint_template.js

@@ -244,11 +244,8 @@ export const angularTemplateRules = {
 
    /**
     * Ensures that property-binding is used instead of interpolation in attributes.
-    *
-    * @remarks
-    * This seems like a great rule, but we violate it too much right now.
     */
-   "template/no-interpolation-in-attributes": "off",
+   "template/no-interpolation-in-attributes": "warn",
 
    /**
     * Ensures that self-closing tags are used for elements with a closing tag but
@@ -261,17 +258,14 @@ export const angularTemplateRules = {
 
    /**
     * Ensures ngSrc is used instead of src for img elements
-    *
-    * @remarks
-    * This would probably be a really good rule to turn on. Revisit in the future.
     */
-   "template/prefer-ngsrc": "off",
+   "template/prefer-ngsrc": "warn",
 
    /**
     * Ensures that the template control flow syntax introduced in Angular 17 is used.
     *
     * @remarks
     * DEREK TODO: Turn this on as part of the Angular migration.
     */
-   "template/prefer-control-flow": "off"
+   "template/prefer-control-flow": "warn"
 };

eslint/core/suggestions.js

@@ -876,7 +876,7 @@ export const suggestionRules = {
     *
     * @remarks
     * This is level 0 because there is a typescript extension rule which
-    * overrides it.
+    * overrides it. See `only-throw-error`.
     */
    "no-throw-literal": "off",
 

eslint/typescript/extension-rules.js

@@ -147,16 +147,6 @@ export const extensionRulesForTypescript = {
     */
    "typescript/no-shadow": "error",
 
-   /**
-    * Disallow throwing literals as exceptions
-    *
-    * @remarks
-    * In addition to consistency and readability, throwing an error object
-    * provides more benefits than throwing a literal, and there isn't a good
-    * reason not to use an error object.
-    */
-   "typescript/no-throw-literal": "error",
-
    /**
     * Disallow unused expressions
     *
@@ -208,6 +198,15 @@ export const extensionRulesForTypescript = {
     */
    "typescript/no-useless-constructor": "error",
 
+   /**
+    * Disallow throwing non-Error values as exceptions
+    *
+    * @remarks
+    * In addition to consistency and readability, throwing an error object
+    * provides more benefits, and conforms with the Principle of Least Surprise.
+    */
+   "typescript/only-throw-error": "error",
+
    /**
     * Require destructuring from arrays and/or objects.
     *
@@ -223,7 +222,7 @@ export const extensionRulesForTypescript = {
     * In addition to consistency and readability, rejecting with an error object
     * provides more benefits than rejecting with a literal, and there isn't a good
     * reason not to use an error object. This rule should
-    * match the `no-throw-literal` rule.
+    * match the `only-throw-error` rule.
     */
    "typescript/prefer-promise-reject-errors": "error",
 

eslint/typescript/typescript-rules.js

@@ -37,7 +37,7 @@ export const typescriptRules = {
     *
     * @remarks
     * The only reason to use such comments is to cover up an underlying
-    * problem. The problem should be addressed instead.
+    * problem. The problem should be directly addressed instead.
     */
    "typescript/ban-ts-comment": "error",
 
@@ -523,6 +523,11 @@ export const typescriptRules = {
     */
    "typescript/no-unnecessary-qualifier": "warn",
 
+   /**
+    * Disallow unnecessary template expressions.
+    */
+   "typescript/no-unnecessary-template-expression": "warn",
+
    /**
     * Enforces that type arguments will not be used if not required
     *
@@ -786,14 +791,6 @@ export const typescriptRules = {
     */
    "typescript/prefer-string-starts-ends-with": "error",
 
-   /**
-    * Recommends using `// @ts-expect-error` over `// @ts-ignore`
-    *
-    * @remarks
-    * Not applicable when the `ban-ts-comment` rule is turned on.
-    */
-   "typescript/prefer-ts-expect-error": "off",
-
    /**
     * Requires any function or method that returns a Promise to be marked async
     *
@@ -893,5 +890,14 @@ export const typescriptRules = {
     * This is level 2 because code flagged by this rule should be simplified
     * for easier readability.
     */
-   "typescript/unified-signatures": "error"
+   "typescript/unified-signatures": "error",
+
+   /**
+    * Enforce typing arguments in .catch() callbacks as unknown
+    *
+    * @remarks
+    * Typescript treats the caught error as `any` by default, which is
+    * unsafe. This rule enforces the use of `unknown` instead.
+    */
+   "typescript/use-unknown-in-catch-callback-variable": "warn"
 };