Align TypeScript configuration with the new Angular CLI project

.github/workflows/check.yml

@@ -22,6 +22,7 @@ jobs:
       - run: yarn test:schematics
       - run: yarn build
       - run: yarn build:schematics
+      - run: yarn build:demo
       - run: yarn test:demo
       - run: yarn add -D chromedriver@~`google-chrome --version | awk '{print $3}' | awk -F. '{print $1}'`
       - run: yarn test:integration
@@ -46,6 +47,7 @@ jobs:
       - run: yarn test:schematics
       - run: yarn build
       - run: yarn build:schematics
+      - run: yarn build:demo
       - run: yarn test:demo
       - run: yarn add -D chromedriver@~`google-chrome --version | awk '{print $3}' | awk -F. '{print $1}'`
       - run: yarn test:integration

angular.json

@@ -87,12 +87,12 @@
               "namedChunks": false,
               "extractLicenses": true,
               "ssr": {
-                "entry": "projects/demo/server.ts"
+                "entry": "projects/demo/src/server.ts"
               }
             },
             "development-ssr": {
               "ssr": {
-                "entry": "projects/demo/server.ts"
+                "entry": "projects/demo/src/server.ts"
               }
             }
           },

package.json

@@ -13,6 +13,7 @@
     "start": "ng serve demo",
     "start:ssr": "ng serve demo --configuration development-ssr",
     "build": "ng build angular-fontawesome",
+    "build:demo": "ng build demo",
     "build:watch": "ng build angular-fontawesome -c development --watch",
     "build:schematics": "tsc -p projects/schematics/tsconfig.json && ts-node -O '{\"module\":\"commonjs\"}' tasks/build-schematics.ts",
     "format": "prettier --write --ignore-path .gitignore '**/*.{js,ts,json,html}'",

projects/demo/e2e/src/app.e2e-spec.ts

@@ -1,4 +1,4 @@
-import { browser, ElementFinder, logging } from 'protractor';
+import { browser, logging } from 'protractor';
 import { appPage } from './app.page';
 
 describe('Angular FontAwesome demo', () => {
@@ -14,15 +14,15 @@ describe('Angular FontAwesome demo', () => {
   });
 
   it('should only add styles once', async () => {
-    const styles: string[] = await appPage.styles.map((style: ElementFinder) => style.getAttribute('innerHTML'));
+    const styles: string[] = await appPage.styles.map((style) => style!.getAttribute('innerHTML'));
     const fontAwesomeStyles = styles.filter((style) => style.includes('.svg-inline--fa'));
 
     expect(fontAwesomeStyles.length).toBe(1);
   });
 
   it('should include styles in the server-side-rendered page', async () => {
     const context = await appPage.appRoot.getAttribute('ng-server-context');
-    if (context !== 'ssr') {
+    if (context !== 'ssg') {
       // Skip the test if the page is not server-side rendered.
       console.warn('Skipping test as the page is not server-side rendered.');
       return;

projects/demo/e2e/tsconfig.json

@@ -5,5 +5,6 @@
     "module": "commonjs",
     "target": "es2018",
     "types": ["jasmine", "jasminewd2", "node"]
-  }
+  },
+  "include": ["src/**/*.ts"]
 }

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

@@ -166,7 +166,7 @@ <h3>Layers</h3>
     <fa-icon [icon]="faBell"></fa-icon>
     <fa-layers-counter
       [position]="selectedPosition"
-      [content]="notificationsCounter | number"
+      [content]="$any(notificationsCounter | number)"
       title="Unread Messages"
     ></fa-layers-counter>
   </fa-layers>
@@ -179,4 +179,4 @@ <h3>Fallback icon</h3>
   Icon uses a fallback icon when the main icon parameter is not specified. Useful for when the icon is loaded
   asynchronously. If no fallback icon is specified, the icon will not appear. (Not shown in this example.)
 </p>
-<fa-icon [icon]="undefined"></fa-icon>
+<fa-icon [icon]="undefined!"></fa-icon>

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

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

projects/demo/server.ts → projects/demo/src/server.ts

@@ -1,9 +1,9 @@
 import { APP_BASE_HREF } from '@angular/common';
 import { CommonEngine } from '@angular/ssr/node';
 import express from 'express';
-import { fileURLToPath } from 'node:url';
 import { dirname, join, resolve } from 'node:path';
-import bootstrap from './src/main.server';
+import { fileURLToPath } from 'node:url';
+import bootstrap from './main.server';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {

projects/demo/tsconfig.app.json

@@ -2,8 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
-    "types": ["node"]
+    "types": []
   },
-  "files": ["src/main.ts", "src/main.server.ts", "server.ts"],
-  "include": ["src/**/*.d.ts"]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
 }

projects/demo/tsconfig.spec.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
-    "types": ["node", "jasmine"]
+    "types": ["jasmine"]
   },
-  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+  "include": ["src/**/*.ts"]
 }

src/lib/config.ts

@@ -18,7 +18,7 @@ export class FaConfig {
    *
    * @default null
    */
-  fallbackIcon: IconDefinition = null;
+  fallbackIcon: IconDefinition | null = null;
 
   /**
    * Set icons to the same fixed width.

src/lib/icon/duotone-icon.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, signal, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, signal, viewChild, ViewContainerRef } from '@angular/core';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { faDummy, initTest, queryByCss } from '../../testing/helpers';
 import { FaDuotoneIconComponent } from './duotone-icon.component';
@@ -121,10 +121,10 @@ describe('FaDuotoneIconComponent', () => {
       template: '<ng-container #host></ng-container>',
     })
     class HostComponent {
-      @ViewChild('host', { static: true, read: ViewContainerRef }) container: ViewContainerRef;
+      container = viewChild('host', { read: ViewContainerRef });
 
       createIcon() {
-        const componentRef = this.container.createComponent(FaDuotoneIconComponent);
+        const componentRef = this.container()!.createComponent(FaDuotoneIconComponent);
         componentRef.setInput('icon', faDummy);
       }
     }

src/lib/icon/duotone-icon.component.ts

@@ -50,7 +50,7 @@ export class FaDuotoneIconComponent extends FaIconComponent {
    */
   readonly secondaryColor = input<string>();
 
-  protected findIconDefinition(i: IconProp | IconDefinition): CoreIconDefinition | null {
+  protected override findIconDefinition(i: IconProp | IconDefinition): CoreIconDefinition | null {
     const definition = super.findIconDefinition(i);
 
     if (definition != null && !Array.isArray(definition.icon[4])) {
@@ -65,7 +65,7 @@ export class FaDuotoneIconComponent extends FaIconComponent {
     return definition;
   }
 
-  protected buildParams(): IconParams {
+  protected override buildParams(): IconParams {
     const params = super.buildParams();
 
     const swapOpacity = this.swapOpacity();
@@ -82,17 +82,21 @@ export class FaDuotoneIconComponent extends FaIconComponent {
     if (params.styles == null) {
       params.styles = {};
     }
-    if (this.primaryOpacity() != null) {
-      params.styles['--fa-primary-opacity'] = this.primaryOpacity().toString();
+    const primaryOpacity = this.primaryOpacity();
+    if (primaryOpacity != null) {
+      params.styles['--fa-primary-opacity'] = primaryOpacity.toString();
     }
-    if (this.secondaryOpacity() != null) {
-      params.styles['--fa-secondary-opacity'] = this.secondaryOpacity().toString();
+    const secondaryOpacity = this.secondaryOpacity();
+    if (secondaryOpacity != null) {
+      params.styles['--fa-secondary-opacity'] = secondaryOpacity.toString();
     }
-    if (this.primaryColor() != null) {
-      params.styles['--fa-primary-color'] = this.primaryColor();
+    const primaryColor = this.primaryColor();
+    if (primaryColor != null) {
+      params.styles['--fa-primary-color'] = primaryColor;
     }
-    if (this.secondaryColor() != null) {
-      params.styles['--fa-secondary-color'] = this.secondaryColor();
+    const secondaryColor = this.secondaryColor();
+    if (secondaryColor != null) {
+      params.styles['--fa-secondary-color'] = secondaryColor;
     }
 
     return params;

src/lib/icon/icon.component.spec.ts

@@ -1,6 +1,6 @@
-import { Component, signal, viewChild, ViewChild, ViewContainerRef } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
+import { Component, signal, viewChild, ViewContainerRef } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { TestBed } from '@angular/core/testing';
 import { faUser as faUserRegular } from '@fortawesome/free-regular-svg-icons';
 import { faCircle, faUser } from '@fortawesome/free-solid-svg-icons';
 import { Subject } from 'rxjs';
@@ -57,7 +57,7 @@ describe('FaIconComponent', () => {
       container = viewChild('host', { read: ViewContainerRef });
 
       createIcon() {
-        const componentRef = this.container().createComponent(FaIconComponent);
+        const componentRef = this.container()!.createComponent(FaIconComponent);
         componentRef.setInput('icon', faUser);
       }
     }
@@ -78,7 +78,7 @@ describe('FaIconComponent', () => {
       template: '<fa-icon [icon]="faUser()"></fa-icon>',
     })
     class HostComponent {
-      @ViewChild(FaIconComponent, { static: true }) iconComponent: FaIconComponent;
+      iconComponent = viewChild(FaIconComponent);
 
       faUser = signal(faUser);
     }
@@ -87,7 +87,7 @@ describe('FaIconComponent', () => {
     fixture.detectChanges();
     expect(queryByCss(fixture, 'svg').classList.contains('fa-spin')).toBeFalsy();
 
-    fixture.componentInstance.iconComponent.animation.set('spin');
+    fixture.componentInstance.iconComponent()!.animation.set('spin');
     fixture.detectChanges();
     expect(queryByCss(fixture, 'svg').classList.contains('fa-spin')).toBeTruthy();
   });

src/lib/icon/icon.component.ts

@@ -1,6 +1,7 @@
-import { Component, inject, computed, model, ChangeDetectionStrategy, DOCUMENT } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, DOCUMENT, inject, model } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import {
+  Attributes,
   FaSymbol,
   FlipProp,
   icon,
@@ -127,16 +128,25 @@ export class FaIconComponent {
       animation: this.animation(),
       border: this.border(),
       inverse: this.inverse(),
-      size: this.size() || null,
-      pull: this.pull() || null,
-      rotate: this.rotate() || null,
+      size: this.size(),
+      pull: this.pull(),
+      rotate: this.rotate(),
       fixedWidth: typeof fixedWidth === 'boolean' ? fixedWidth : this.config.fixedWidth,
-      stackItemSize: this.stackItem != null ? this.stackItem.stackItemSize() : null,
+      stackItemSize: this.stackItem != null ? this.stackItem.stackItemSize() : undefined,
     };
 
     const transform = this.transform();
     const parsedTransform = typeof transform === 'string' ? parse.transform(transform) : transform;
 
+    const mask = this.mask();
+    const maskIconDefinition = mask != null ? this.findIconDefinition(mask) : null;
+
+    const attributes: Attributes = {};
+    const a11yRole = this.a11yRole();
+    if (a11yRole != null) {
+      attributes['role'] = a11yRole;
+    }
+
     const styles: Styles = {};
     if (classOpts.rotate != null && !isKnownRotateValue(classOpts.rotate)) {
       styles['--fa-rotate-angle'] = `${classOpts.rotate}`;
@@ -146,11 +156,9 @@ export class FaIconComponent {
       title: this.title(),
       transform: parsedTransform,
       classes: faClassList(classOpts),
-      mask: this.mask() != null ? this.findIconDefinition(this.mask()) : null,
+      mask: maskIconDefinition ?? undefined,
       symbol: this.symbol(),
-      attributes: {
-        role: this.a11yRole(),
-      },
+      attributes,
       styles,
     };
   }

src/lib/layers/layers-text.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, input, computed, ChangeDetectionStrategy, DOCUMENT } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, DOCUMENT, inject, input } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import {
   FlipProp,
@@ -61,9 +61,9 @@ export class FaLayersTextComponent {
       flip: this.flip(),
       border: this.border(),
       inverse: this.inverse(),
-      size: this.size() || null,
-      pull: this.pull() || null,
-      rotate: this.rotate() || null,
+      size: this.size(),
+      pull: this.pull(),
+      rotate: this.rotate(),
       fixedWidth: this.fixedWidth(),
     };
 

src/lib/public_api.ts

@@ -1,5 +1,5 @@
 export { FontAwesomeModule } from './fontawesome.module';
-export { AnimationProp, FaProps } from './shared/models/props.model';
+export type { AnimationProp, FaProps } from './shared/models/props.model';
 export { FaIconComponent } from './icon/icon.component';
 export { FaDuotoneIconComponent } from './icon/duotone-icon.component';
 export { FaConfig } from './config';
@@ -8,10 +8,10 @@ export { FaLayersTextComponent } from './layers/layers-text.component';
 export { FaLayersCounterComponent } from './layers/layers-counter.component';
 export { FaStackComponent } from './stack/stack.component';
 export { FaStackItemSizeDirective } from './stack/stack-item-size.directive';
-export { FaIconLibrary, FaIconLibraryInterface } from './icon-library';
-export { IconPrefix, IconName, IconLookup, IconDefinition, IconPack } from './types';
+export { FaIconLibrary, type FaIconLibraryInterface } from './icon-library';
+export type { IconPrefix, IconName, IconLookup, IconDefinition, IconPack } from './types';
 
-export {
+export type {
   IconParams,
   CounterParams,
   TextParams,

src/lib/shared/utils/classlist.util.ts

@@ -36,5 +36,5 @@ export const faClassList = (props: FaProps): string[] => {
 
   return Object.keys(classes)
     .map((key) => (classes[key] ? key : null))
-    .filter((key) => key);
+    .filter((key): key is string => key != null);
 };

tsconfig.json

@@ -1,26 +1,19 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
+    "baseUrl": ".",
     "forceConsistentCasingInFileNames": true,
-    "esModuleInterop": true,
     "strict": true,
-    "strictPropertyInitialization": false,
-    "strictNullChecks": false,
-    "noImplicitOverride": false,
-    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
-    "declaration": false,
+    "isolatedModules": true,
     "experimentalDecorators": true,
-    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022",
-    "useDefineForClassFields": false,
-    "lib": ["ES2022", "dom"],
+    "module": "preserve",
     "stripInternal": true,
     "paths": {
       "@fortawesome/angular-fontawesome": ["dist/angular-fontawesome"],
@@ -31,6 +24,25 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
+    "typeCheckHostBindings": true,
     "strictTemplates": true
-  }
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./projects/demo/tsconfig.app.json"
+    },
+    {
+      "path": "./projects/demo/tsconfig.spec.json"
+    },
+    {
+      "path": "./projects/demo/e2e/tsconfig.json"
+    }
+  ]
 }