Skip to content

Invalid ts configuration when generating customWebpackConfig for angular 21 #2161

@jbjhjm

Description

@jbjhjm

Describe the Bug

After migrating to angular 21, I experienced massive amounts of highly irritating compilation errors reported from ts-node trying to parse my customWebpackConfig.
In my case, there's a multitude of customization processing going on which have been abstracted into a simple helper class. After update to 21, I got error TS2339 on every class property.
I suspected it had something to do with recent tsconfig changes. So I dug into it.

I found a somewhat problematic situation.
CustomWebpackBuilder loads the application's tsconfig from project configuration.

However, some of the configuration will be overridden in load-module.

With angular changing its module/moduleResolution strategy plus the overrides in place, this seems to result in a defunct or partly defunct ts configuration.

Possibly related:
#2025
#1659

Minimal Reproduction

Declare a simple class inside the file passed to customWebpackConfig.path:

export class WebpackConfigHelper {

	private other:any;

	constructor(
		private config:any, 
	) {}

}

run CLI build/serve, resulting in:

error TS2339: Property 'other' does not exist on type 'WebpackConfigHelper'.
error TS2339: Property 'config' does not exist on type 'WebpackConfigHelper'.

Expected Behavior & Solution

Compilation should work. I'm not sure what is happening, it seems like ts-node is not extracting type info correctly and tricks itself into thinking it received erronous code.
Pretty sure its related to the module changes, but I'm not enough of an expert when it comes to tsconfig flags.

It's interesting to note that parsing the same config files using @nx/webpack:webpack executor is working flawlessly.
Its custom webpack processing is triggered from here: https://github.com/nrwl/nx/blob/master/packages/webpack/src/utils/webpack/resolve-user-defined-webpack-config.ts#L4

I injected a "transpileOnly:true" to the ts-node overrides, allowing to skip type checking and everything began to work as usual again.

Additionally I recommend to think about decoupling from the app's tsconfig.
It doesn't seem logical to use the app's tsconfig to process webpack-level logic.
Allowing to specify a custom tsconfig path to use instead would help imo.

Environment


Libs
- @angular/core version: 21.0.9
- @angular-devkit/build-angular version: 21.0.6
- @angular-builders/custom-webpack version: 21.0.0

For Tooling issues:
- Node version: 20.19.2
- Platform:  Linux

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions