Align TypeScript configuration with the new Angular CLI project

devoto13 · devoto13 · commit fbcb7ee971f7 · 2025-06-02T18:34:03.000+02:00
With this we enable the remaining strict options and fix any new errors. The change ensures that the generated declaration files include `undefined`/`null` types, so that the library can be used by the projects which have `strictNullChecks` enabled. Fixes #469
diff --git a/.github/workflows/check.yml b/.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
diff --git a/package.json b/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}'",
diff --git a/projects/demo/.eslintrc.json b/projects/demo/.eslintrc.json
@@ -8,6 +8,7 @@
         "project": [
           "projects/demo/tsconfig.app.json",
           "projects/demo/tsconfig.spec.json",
+          "projects/demo/tsconfig.server.json",
           "projects/demo/e2e/tsconfig.json"
         ],
         "createDefaultProgram": true
diff --git a/projects/demo/e2e/src/app.e2e-spec.ts b/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,7 +14,7 @@ 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);
diff --git a/projects/demo/e2e/tsconfig.json b/projects/demo/e2e/tsconfig.json
@@ -5,5 +5,6 @@
     "module": "commonjs",
     "target": "es2018",
     "types": ["jasmine", "jasminewd2", "node"]
-  }
+  },
+  "include": ["src/**/*.ts"]
 }
diff --git a/projects/demo/src/app/app.component.html b/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>
diff --git a/projects/demo/src/app/app.component.ts b/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.
diff --git a/projects/demo/tsconfig.app.json b/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"]
 }
diff --git a/projects/demo/tsconfig.server.json b/projects/demo/tsconfig.server.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": ["node"]
+  },
+  "files": ["server.ts"]
+}
diff --git a/projects/demo/tsconfig.spec.json b/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"]
 }
diff --git a/src/lib/config.ts b/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.
diff --git a/src/lib/icon/duotone-icon.component.spec.ts b/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);
       }
     }
diff --git a/src/lib/icon/duotone-icon.component.ts b/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;
diff --git a/src/lib/icon/icon.component.spec.ts b/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();
   });
diff --git a/src/lib/icon/icon.component.ts b/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,
     };
   }
diff --git a/src/lib/layers/layers-text.component.ts b/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(),
     };
 
diff --git a/src/lib/public_api.ts b/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,
diff --git a/src/lib/shared/utils/classlist.util.ts b/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);
 };
diff --git a/tsconfig.json b/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,28 @@
     "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/tsconfig.server.json"
+    },
+    {
+      "path": "./projects/demo/e2e/tsconfig.json"
+    }
+  ]
 }
diff --git a/tsconfig.lib.json b/tsconfig.lib.json
@@ -5,7 +5,8 @@
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,
-    "types": ["node"]
+    "types": []
   },
-  "exclude": ["src/testing/*.ts", "**/*.spec.ts"]
+  "include": ["src/**/*.ts", "testing/src/**/*.ts"],
+  "exclude": ["src/testing/*.ts", "src/**/*.spec.ts", "testing/src/**/*.spec.ts"]
 }
diff --git a/tsconfig.spec.json b/tsconfig.spec.json

Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,6 @@`
`5`	`5`	`"module": "commonjs",`
`6`	`6`	`"target": "es2018",`
`7`	`7`	`"types": ["jasmine", "jasminewd2", "node"]`
`8`		`- }`
	`8`	`+ },`
	`9`	`+ "include": ["src/*/.ts"]`
`9`	`10`	`}`