Extend Angulars AbstractControl through declaration merging after migrating to Angular 17 /...

we have extended AbstractControl with some additional fields that we need (e.g. warnings).

src/lib/typings/index.d.ts

declare module '@angular/forms' {
interface AbstractControl {
someCustomField: string;
}
}


The folder is included in typeRoots

tsconfig.lib.json

{
"compileOnSave": false,
"compilerOptions": {
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"baseUrl": ".",
"declaration": true,
"declarationMap": false,
"emitDecoratorMetadata": false,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"module": "es2020",
"target": "ES2022",
"moduleResolution": "node",
"preserveConstEnums": true,
"removeComments": false,
"sourceMap": true,
"lib": [
"es2015",
"es2020",
"dom"
],
"typeRoots": [
"node_modules/@types",
"src/lib/typings"
],
"types": [
"node",
"event-source-polyfill",
],
"paths": {
"@angular/*": [
"node_modules/@angular/*"
],
"@ocp/ng-core/*": [
"src/lib/core/*/public_api"
]
},
"useDefineForClassFields": false
},
"exclude": [
"compiled",
"dist",
"e2e",
"node_modules",
"*.ngfactory.ts",
"**/*.spec.ts",
"**/test-stubs/*.ts",
"test.ts"
],
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}


IntelliJ recognized it correctly, but when running ng build it fails

TS2339: Property 'someCustomField' does not exist on type 'AbstractControl<any, any>'.

104 takeWhile(() => abstractControl.someCustomField)


I thought maybe I need to add @angular/forms in the types array but then it fails with the following

✖ Compiling with Angular sources in Ivy full compilation mode.
error TS2688: Cannot find type definition file for '@angular/forms'.
The file is in the program because:
Entry point of type library '@angular/forms' specified in compilerOptions


Before the migration, we simply added the typings.d.ts file to the types array and that worked. But there were some changes with typescript 5.1 and cannot do this anymore https://www.typescriptlang.org/docs...s-disables-upward-walks-for-node_modulestypes

Any guidance on how to achieve this would be nice. Thanks!

Continue reading...