Pr 415

README.md

@@ -228,11 +228,14 @@ TODO:
 
 ## Table of Contents
 
-1. [Getting Started](#getting-started)
-2. [Resources](#resources)
-3. [Contributing](#contributing)
-4. [Deployment](#deployment)
-5. [License](#license)
+- [Doubtfire Web ![CI](https://github.com/doubtfire-lms/doubtfire-web/actions/workflows/nodejs-ci.yml)](#doubtfire-web-)
+  - [Migration Progress](#migration-progress)
+  - [Table of Contents](#table-of-contents)
+  - [Getting Started](#getting-started)
+  - [Deployment](#deployment)
+  - [Resources](#resources)
+  - [Contributing](#contributing)
+  - [License](#license)
 
 ## Getting Started
 

angular.json

@@ -10,7 +10,10 @@
       "prefix": "f",
       "schematics": {
         "@schematics/angular:application": {
-          "strict": false
+          "strict": false,
+          "standalone": false,
+          "style": "scss",
+          "skipTests": true
         }
       },
       "architect": {
@@ -20,7 +23,9 @@
             "outputPath": "dist",
             "index": "build/index.html",
             "browser": "src/main.ts",
-            "polyfills": ["src/polyfills.ts"],
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/assets",
@@ -149,7 +154,10 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.component.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         },
         "eslint": {
@@ -162,9 +170,6 @@
     }
   },
   "schematics": {
-    "@schematics/angular:component": {
-      "style": "scss"
-    },
     "@angular-eslint/schematics:application": {
       "setParserOptionsProject": true
     },

eslint.config.js

@@ -0,0 +1,62 @@
+// @ts-check
+
+// Allows us to bring in the recommended core rules from eslint itself
+const eslint = require('@eslint/js');
+
+// Allows us to use the typed utility for our config, and to bring in the recommended rules for TypeScript projects from typescript-eslint
+const tseslint = require('typescript-eslint');
+
+// Allows us to bring in the recommended rules for Angular projects from angular-eslint
+const angular = require('angular-eslint');
+
+// Export our config array, which is composed together thanks to the typed utility function from typescript-eslint
+module.exports = tseslint.config(
+  {
+    // Everything in this config object targets our TypeScript files (Components, Directives, Pipes etc)
+    files: ['**/*.ts'],
+    extends: [
+      // Apply the recommended core rules
+      eslint.configs.recommended,
+      // Apply the recommended TypeScript rules
+      ...tseslint.configs.recommended,
+      // Optionally apply stylistic rules from typescript-eslint that improve code consistency
+      ...tseslint.configs.stylistic,
+      // Apply the recommended Angular rules
+      ...angular.configs.tsRecommended,
+    ],
+    // Set the custom processor which will allow us to have our inline Component templates extracted
+    // and treated as if they are HTML files (and therefore have the .html config below applied to them)
+    processor: angular.processInlineTemplates,
+    // Override specific rules for TypeScript files (these will take priority over the extended configs above)
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'f',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'f',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    // Everything in this config object targets our HTML files (external templates,
+    // and inline templates as long as we have the `processor` set on our TypeScript config above)
+    files: ['**/*component.html'],
+    extends: [
+      // Apply the recommended Angular template rules
+      ...angular.configs.templateRecommended,
+      // Apply the Angular template rules which focus on accessibility of our apps
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  },
+);