Activate Angular template linter

rujorgensen · Sep 19, 2024 · 58de3f8 · 58de3f8
1 parent 3019fe9
commit 58de3f8
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 23 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -14,6 +14,9 @@
                 "*.js",
                 "*.jsx"
             ],
+            "plugins": [
+                "@angular-eslint/eslint-plugin"
+            ],
             "rules": {
                 "@nx/enforce-module-boundaries": [
                     "error",
@@ -29,29 +32,59 @@
                             }
                         ]
                     }
-                ]
+                ],
+                "@angular-eslint/component-selector": [
+                    "error",
+                    {
+                        "type": "element",
+                        "prefix": "app",
+                        "style": "kebab-case"
+                    }
+                ],
+                "@angular-eslint/directive-selector": [
+                    "error",
+                    {
+                        "type": "attribute",
+                        "prefix": "app",
+                        "style": "camelCase"
+                    }
+                ],
+                "no-bitwise": "off",
+                "security-node/detect-crlf": "off",
+                "@angular-eslint/no-conflicting-lifecycle": "error",
+                "@angular-eslint/no-host-metadata-property": "error",
+                "@angular-eslint/no-input-rename": "error",
+                "@angular-eslint/no-inputs-metadata-property": "error",
+                "@angular-eslint/no-output-native": "error",
+                "@angular-eslint/no-output-on-prefix": "error",
+                "@angular-eslint/no-output-rename": "error",
+                "@angular-eslint/no-outputs-metadata-property": "error",
+                "@angular-eslint/use-lifecycle-interface": "error",
+                "@angular-eslint/use-pipe-transform-interface": "error"
             }
         },
         {
             "files": [
-                "*.ts",
-                "*.tsx"
-            ],
-            "extends": [
-                "plugin:@nx/typescript"
+                "*.html"
             ],
             "rules": {
-                "@typescript-eslint/no-extra-semi": "error",
-                "no-extra-semi": "off"
-            }
+                "no-irregular-whitespace": "off",
+                "@angular-eslint/template/banana-in-box": "error",
+                "@angular-eslint/template/no-negated-async": "error",
+                "@angular-eslint/template/eqeqeq": "error",
+                "@angular-eslint/template/no-inline-styles": "error"
+            },
+            "plugins": [
+                "@angular-eslint/eslint-plugin-template"
+            ]
         },
         {
             "files": [
-                "*.js",
-                "*.jsx"
+                "*.ts",
+                "*.tsx"
             ],
             "extends": [
-                "plugin:@nx/javascript"
+                "plugin:@nx/typescript"
             ],
             "rules": {
                 "@typescript-eslint/no-extra-semi": "error",

diff --git a/apps/angular-app/src/app/app.component.html b/apps/angular-app/src/app/app.component.html
@@ -4,6 +4,7 @@ <h1>Welcome to angular-app!</h1>
         alt="Nx - Powerful, Extensible Dev Tools" />
 </div>
 <div>Message: {{ hello$ | async | json }}</div>
+<div>{{ someObject?.thisIsAlwaysThere?.str }}</div>
 
 <app-simple-classic-component></app-simple-classic-component>
 <app-simple-standalone-component></app-simple-standalone-component>
diff --git a/apps/angular-app/src/app/app.component.ts b/apps/angular-app/src/app/app.component.ts
@@ -2,13 +2,20 @@ import { Component } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Message } from '@happynrwl/api-interfaces';
 
+interface ISomeObject {
+    thisIsAlwaysThere: { str: string };
+}
+
 @Component({
     selector: 'happynrwl-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
     hello$ = this.http.get<Message>('/api/hello');
+    protected someObject: ISomeObject = {
+        thisIsAlwaysThere: { str: 'Here I am' },
+    }
 
     constructor(
         private http: HttpClient,

diff --git a/apps/angular-app/tsconfig.app.json b/apps/angular-app/tsconfig.app.json
@@ -4,7 +4,8 @@
         "outDir": "../../dist/out-tsc",
         "types": [],
         "target": "ES2022",
-        "useDefineForClassFields": false
+        "useDefineForClassFields": false,
+        "strict": true
     },
     "files": [
         "src/main.ts",
@@ -18,5 +19,10 @@
         "**/*.cy.js",
         "**/*.cy.tsx",
         "**/*.cy.jsx"
-    ]
+    ],
+    "angularCompilerOptions": {
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    }
 }
diff --git a/apps/angular-app/tsconfig.editor.json b/apps/angular-app/tsconfig.editor.json
@@ -1,8 +1,15 @@
 {
-  "extends": "./tsconfig.json",
-  "include": ["**/*.ts"],
-  "compilerOptions": {
-    "types": ["jest", "node"]
-  },
-  "exclude": ["jest.config.ts"]
-}
+    "extends": "./tsconfig.json",
+    "include": [
+        "**/*.ts"
+    ],
+    "compilerOptions": {
+        "types": [
+            "jest",
+            "node"
+        ]
+    },
+    "exclude": [
+        "jest.config.ts"
+    ]
+}
diff --git a/libs/.gitkeep b/libs/.gitkeep
diff --git a/nx.json b/nx.json
@@ -14,11 +14,13 @@
             "style": "scss",
             "linter": "eslint",
             "unitTestRunner": "jest",
-            "e2eTestRunner": "cypress"
+            "e2eTestRunner": "cypress",
+            "strict": true
         },
         "@nx/angular:library": {
             "linter": "eslint",
-            "unitTestRunner": "jest"
+            "unitTestRunner": "jest",
+            "strict": true
         },
         "@nx/angular:component": {
             "style": "scss"