Compile of Angular app not possible since update to v3.2.x

[heinerlamprecht]

Background & Context

We tried to update from v3.17 to v3.20 or v3.2.1, but the compile of our Angular app fails. Installing @types/trusted-types 2.0.7 does not change anything.

Bug

When running the build. the following error message appears:

> ng-web@3.5.0 build:app
> ng build in-web-app --configuration production --aot

✔ Browser application bundle generation complete.

Error: node_modules/dompurify/dist/purify.es.d.mts:170:28 - error TS2304: Cannot find name 'TrustedTypePolicy'.

170     TRUSTED_TYPES_POLICY?: TrustedTypePolicy | undefined;
                               ~~~~~~~~~~~~~~~~~


Error: node_modules/dompurify/dist/purify.es.d.mts:245:9 - error TS2304: Cannot find name 'TrustedHTML'.

245     }): TrustedHTML;
            ~~~~~~~~~~~


Error: node_modules/dompurify/dist/purify.es.d.mts:396:34 - error TS2339: Property 'trustedTypes' does not exist on type 'Window & typeof globalThis'.

396     trustedTypes?: typeof window.trustedTypes;
                                     ~~~~~~~~~~~~

Input

n/a

Given output

n/a

Expected output

no build error

Feature

n/a

[cure53]

Thanks for filing this, @reduckted sorry to summon you here again, might this be related to the recent changes?

[ghiscoding]

@heinerlamprecht you should also make sure that your tsconfig has "lib": [dom] and it might also require @types/node though I'm not sure about this last one. My Angular project is building correctly after v3.2.1 (it was failing in v3.2.0 with different error). TrustedTypePolicy and TrustedHTML are global types but I assume it requires certain configuration of tsconfig and certain @types to be installed as well. You might as well make sure that you have "typeRoots": ["node_modules/@types"]

On a side note, the project previously had types separately (you needed to add @types/dompurify to get types with <3.2.0), but the v3.2.0 added types internally and so @types/dompurify is no longer required... all that to say, you might get more luck with previous v3.1.x, because adding the types internally caused certain side effects that are being tweaked as we go :)

[reduckted]

@heinerlamprecht Can you provide a reproduction, please?

[Athov]

Hello, I have the same issue:

✔ Browser application bundle generation complete.

Error: node_modules/@tinkoff/ng-dompurify/lib/types/dompurify-hook.d.ts:1:18 - error TS2305: Module '"dompurify"' has no exported member 'HookEvent'.

1 import { Config, HookEvent } from 'dompurify';
                    ~~~~~~~~~


Error: node_modules/dompurify/dist/purify.cjs.d.ts:170:28 - error TS2304: Cannot find name 'TrustedTypePolicy'.

170     TRUSTED_TYPES_POLICY?: TrustedTypePolicy | undefined;
                                ~~~~~~~~~~~~~~~~~


Error: node_modules/dompurify/dist/purify.cjs.d.ts:245:9 - error TS2304: Cannot find name 'TrustedHTML'.

245     }): TrustedHTML;
             ~~~~~~~~~~~

Error: node_modules/dompurify/dist/purify.cjs.d.ts:396:34 - error TS2339: Property 'trustedTypes' does not exist on type 'Window & typeof globalThis'.

396     trustedTypes?: typeof window.trustedTypes;
                                      ~~~~~~~~~~~~

I have everything in tsconfig also have the @types installed:

"@types/dompurify": "^3.2.0",
"@types/node": "^20.17.7",
"@types/trusted-types": "^2.0.7",

At the moment I have downgraded to v3.1.7

[reduckted]

Please provide a reproduction. Without one, there's nothing we can do.

[DanielSchiavini]

The package, after install, does not seem to contain any type definitions

[reduckted]

@DanielSchiavini You have file nesting enabled.

[heinerlamprecht]

@reduckted I was able to strip our app down to a minimal setup to reproduce the issue. Just unpack the attachment, and inside the directory call

npm i ; npm run build:app

Hope if helps.

test-web.zip

[DanielSchiavini]

**reduckted ** commented Nov 25, 2024

I don't use VSCode. Folder contents:

$ $ ls node_modules/dompurify/*
node_modules/dompurify/LICENSE  node_modules/dompurify/package.json  node_modules/dompurify/README.md

node_modules/dompurify/dist:
purify.cjs.d.ts  purify.cjs.js.map  purify.es.mjs      purify.js      purify.min.js
purify.cjs.js    purify.es.d.mts    purify.es.mjs.map  purify.js.map  purify.min.js.map


$ cat node_modules/dompurify/package.json | grep version
  "version": "3.2.1",

[reduckted]

@heinerlamprecht Thanks for the reproduction. I also had to npm i @ngstack/translate to get it to compile, but I was able to reproduce the problem with it after that 😄

Installing @types/trusted-types didn't solve the problem, which is very interesting. 😕 There must be some combination of Angular and/or TypeScript compilation settings that cause them to not be used in this situation. I think I've found the solution though - #1036.

As a workaround until that's merged and released, if it doesn't affect anything else in your application, you can add skipLibCheck to the TypeScript compilation options.

[heinerlamprecht]

@reduckted thanks for the update and the fix.

[cure53]

Is it safe to go for another release? 😅