I'm facing a perplexing issue: my code runs smoothly in TypeScript strict mode but fails to compile in Angular. The trouble seems to stem from BehaviorSubject<this>; other generic typed fields do not pose any problems.
Below is the snippet of code causing the issue:
class SomeGeneric<T> {}
class BaseClass {
/* comment or uncomment the line below */
public thisSubject$: BehaviorSubject<this | null> | undefined;
public thisPromise: Promise<this> | undefined;
public thisSome = new SomeGeneric<this>();
}
class ExtClass extends BaseClass {
public anotherField: number = 0;
}
function takesCtor(ctor: typeof BaseClass) {
console.log(ctor);
}
takesCtor(ExtClass);
Upon inserting this code into an Angular project's source, the error message arises (specifically at the last line when trying to pass the child class constructor to a function that expects the base class constructor):
Argument of type 'typeof ExtClass' is not assignable to parameter of type 'typeof BaseClass'.
Construct signature return types 'ExtClass' and 'BaseClass' are incompatible.
The types of 'thisSubject$' are incompatible between these types.
Type 'BehaviorSubject<ExtClass | null> | undefined' is not assignable to type 'BehaviorSubject<BaseClass | null> | undefined'.
Type 'BehaviorSubject<ExtClass | null>' is not assignable to type 'BehaviorSubject<BaseClass | null>'.
Types of property 'observers' are incompatible.
Type 'Observer<ExtClass | null>[]' is not assignable to type 'Observer<BaseClass | null>[]'.
Type 'Observer<ExtClass | null>' is not assignable to type 'Observer<<BaseClass/null>.
Type 'BaseClass | null' is not assignable to type '<ExtClassnull'>.
Moreover, here is a segment from tsconfig.json:
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"module": "ES2020",
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2020",
"typeRoots": ["node_modules/@types"],
"lib": ["es2018", "dom"],
"sourceMap": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true
}
To explore further, I have provided a StackBlitz link featuring a minimal Angular application where the issue occurs: https://stackblitz.com/edit/angular-ivy-gmsfuf?file=src/main.ts
Additionally, you can find a StackBlitz link for a simple plain TypeScript project without the compilation issue: https://stackblitz.com/edit/typescript-dufytr?file=index.ts
The main query revolves around
How can I resolve the compiling issue faced in Angular when the same code works flawlessly in plain TypeScript? Which Angular package might be triggering this error? Considering it only occurs in one project and not the other, my assumption leans towards a package conflict or an Angular compiler option. Any guidance on where to begin investigating?