Align configuration with new Angular project

Author: devoto13

projects/demo/.browserslistrc

@@ -42,7 +42,7 @@ <h3>Animation</h3>
 <fa-icon [icon]="faSync" [spin]="isSyncAnimated" (click)="isSyncAnimated = !isSyncAnimated"></fa-icon>
 <p>Slide to turn up the magic.</p>
 <fa-icon [icon]="faMagic" transform="rotate-{{ magicLevel }}"></fa-icon>
-<input type="range" [value]="magicLevel" (input)="magicLevel = $event.target.value" />
+<input type="range" [value]="magicLevel" (input)="magicLevel = $any($event.target).value" />
 
 <h3>Stack</h3>
 <p>Stack multiple icons into one.</p>
@@ -90,7 +90,7 @@ <h3>Layers</h3>
       [min]="1000"
       [max]="2000"
       [value]="notificationsCounter"
-      (input)="notificationsCounter = $event.target.value"
+      (input)="notificationsCounter = $any($event.target).value"
     />
   </div>
   <div class="selection">

projects/demo/src/app/app.component.html

@@ -48,7 +48,7 @@ export class AppComponent {
   isSyncAnimated = true;
   magicLevel = 0;
 
-  selectedPosition: string;
+  selectedPosition: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 
   constructor(library: FaIconLibrary, faConfig: FaConfig) {
     // Notice that we're adding two different icon objects to the library.

projects/demo/src/app/app.component.ts

@@ -101,7 +101,8 @@ export class FaIconComponent implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges) {
     if (this.icon == null && this.config.fallbackIcon == null) {
-      return faWarnIfIconSpecMissing();
+      faWarnIfIconSpecMissing();
+      return;
     }
 
     if (changes) {

projects/demo/tsconfig.app-ve.json

@@ -12,11 +12,9 @@ export const faNormalizeIconSpec = (
     return iconSpec;
   }
 
-  if (Array.isArray(iconSpec) && (iconSpec as string[]).length === 2) {
-    return { prefix: iconSpec[0], iconName: iconSpec[1] };
-  }
-
   if (typeof iconSpec === 'string') {
     return { prefix: defaultPrefix, iconName: iconSpec };
   }
+
+  return { prefix: iconSpec[0], iconName: iconSpec[1] };
 };

src/lib/icon/icon.component.ts

@@ -3,23 +3,34 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "strictPropertyInitialization": false,
+    "strictNullChecks": false,
+    "noImplicitOverride": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "module": "es2020",
-    "moduleResolution": "node",
+    "downlevelIteration": true,
     "experimentalDecorators": true,
+    "moduleResolution": "node",
     "importHelpers": true,
     "target": "ES2022",
-    "strict": true,
-    "strictPropertyInitialization": false,
-    "strictNullChecks": false,
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": ["ES2022", "dom"],
     "stripInternal": true,
-    "typeRoots": ["node_modules/@types"],
-    "lib": ["es2017", "dom"],
     "paths": {
       "@fortawesome/angular-fontawesome": ["dist/angular-fontawesome"],
       "@fortawesome/angular-fontawesome/testing": ["dist/angular-fontawesome/testing"]
-    },
-    "useDefineForClassFields": false
+    }
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }

src/lib/shared/utils/normalize-icon-spec.util.ts

@@ -2,18 +2,10 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/lib",
-    "declarationMap": true,
     "declaration": true,
+    "declarationMap": true,
     "inlineSources": true,
-    "types": [],
-    "lib": ["dom", "es2018"]
-  },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true,
-    "enableResourceInlining": true
+    "types": []
   },
   "exclude": ["src/testing/*.ts", "src/test.ts", "**/*.spec.ts"]
 }