Can't Build Angular Project Without Setting SkipLibCheck: True

by ADMIN 63 views

Bug Description

When starting an Angular application, compilation fails due to several type errors in the @ui5/webcomponents-* packages. This issue is encountered when using the @ui5/webcomponents-ngx library in an Angular project. The errors are related to the UI5Element type and the import of declaration files without using the import type keyword.

Expected Behavior

The Angular app should be built without any errors, without having to enable skipLibCheck in the TypeScript configuration. This would ensure that the project can be compiled and run smoothly, without any type-related issues.

Steps to Reproduce

  1. Install the @ui5/webcomponents-ngx library in your Angular project.
  2. Import any component from the library in your app, for example, the ButtonComponent.
  3. Try to build the project using the Angular CLI.

Isolated Example

A minimal reproducible example of this issue can be found in the following StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-miqc2zjn?file=src%2Fmain.ts

Context

  • UI5 Web Components version: 2.7.3
  • UI5 Web Components for Angular version: 0.4.3
  • Angular Version: 18.2.8
  • OS/Platform: MacOS
  • Browser: Chrome 133
  • Affected component: all

Log Output / Stack Trace / Screenshots

The following build errors are encountered when trying to build the project:

Click to see build errors

Error: node_modules/@ui5/webcomponents-base/dist/index.d.ts:7:38 - error TS2552: Cannot find name 'UI5Element'. Did you mean 'Element'?

7 export type UI5CustomEvent<T extends UI5Element, N extends keyof T["eventDetails"]> = TargetedCustomEvent<T["eventDetails"][N], T>; ~~~~~~~~~~

node_modules/typescript/lib/lib.dom.d.ts:7973:13 7973 declare var Element: { ~~~~~~~ 'Element' is declared here.

Error: node_modules/@ui5/webcomponents-base/dist/thirdparty/preact/jsx.d.ts:12:8 - error TS2846: A declaration file cannot be imported without 'import type'. Did you mean to import an implementation file './preact.module.js' instead?

12 } from './preact.module.d.ts'; ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ui5/webcomponents-base/dist/thirdparty/preact/jsxRuntime.module.d.ts:3:26 - error TS2846: A declaration file cannot be imported without 'import type'. Did you mean to import an implementation file './preact.module.js' instead?

3 export { Fragment } from './preact.module.d.ts'; ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ui5/webcomponents-base/dist/thirdparty/preact/jsxRuntime.module.d.ts:10:8 - error TS2846: A declaration file cannot be imported without 'import type'. Did you mean to import an implementation file './preact.module.js' instead?

10 } from './preact.module.d.ts'; ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ui5/webcomponents-base/dist/thirdparty/preact/jsxRuntime.module.d.ts:11:29 - error TS2846: A declaration file cannot be imported without 'import type'. Did you mean to import an implementation file './jsx.js' instead?

11 import { JSXInternal } from './jsx.d.ts'; ~~~~~~~~~~~~

Priority

  • [ ] Low
  • [ ] Medium
  • [x] High
  • [ ] Very High

Stakeholder Info

  • Organization: SAP LeanIX
  • Business impact: high

Workaround

To build the Angular project without any errors, you can set "skipLibCheck": true in the tsconfig.json file. However, this is not the expected behavior, as the project should be able to build without this configuration.

Solution

To resolve this issue, the @ui5/webcomponents-ngx library needs to be updated to fix the type errors and import declaration files correctly. Alternatively, the Angular project can be configured to ignore the type errors by setting "skipLibCheck": true in the tsconfig.json file. However, this is not a recommended solution, as it may lead to other issues in the project.

Conclusion

Q: What is the issue with building an Angular project without setting skipLibCheck: true?

A: The issue is that the @ui5/webcomponents-ngx library has type errors in its declaration files, which are causing the build to fail. These type errors are related to the UI5Element type and the import of declaration files without using the import type keyword.

Q: What is the expected behavior?

A: The expected behavior is that the Angular app should be built without any errors, without having to enable skipLibCheck in the TypeScript configuration. This would ensure that the project can be compiled and run smoothly, without any type-related issues.

Q: What are the steps to reproduce the issue?

A: To reproduce the issue, follow these steps:

  1. Install the @ui5/webcomponents-ngx library in your Angular project.
  2. Import any component from the library in your app, for example, the ButtonComponent.
  3. Try to build the project using the Angular CLI.

Q: Is there an isolated example of the issue?

A: Yes, a minimal reproducible example of this issue can be found in the following StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-miqc2zjn?file=src%2Fmain.ts

Q: What is the context of the issue?

A: The context of the issue is:

  • UI5 Web Components version: 2.7.3
  • UI5 Web Components for Angular version: 0.4.3
  • Angular Version: 18.2.8
  • OS/Platform: MacOS
  • Browser: Chrome 133
  • Affected component: all

Q: What is the log output/stack trace/screenshots of the issue?

A: The following build errors are encountered when trying to build the project:

Click to see build errors

Error: node_modules/@ui5/webcomponents-base/dist/index.d.ts:7:38 - error TS2552: Cannot find name 'UI5Element'. Did you mean 'Element'?

7 export type UI5CustomEvent<T extends UI5Element, N extends keyof T["eventDetails"]> = TargetedCustomEvent<T["eventDetails"][N], T>; ~~~~~~~~~~

node_modules/typescript/lib/lib.dom.d.ts:7973:13 7973 declare var Element: { ~~~~~~~ 'Element' is declared here.

Error: node_modules/@ui5/webcomponents-base/dist/thirdparty/preact/jsx.d.ts:12:8 - error TS2846: A declaration file cannot be imported without 'import type'. Did you mean to import an implementation file './preact.module.js' instead?

12 } from './preact.module.d.ts'; ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ui5/webcomponents-base/dist/thirdparty/preact/jsxRuntime.module.d.ts:3:26 - error TS2846: A declaration file cannot be imported without 'import type'. Did you mean to import an implementation file './preact.module.js' instead?

3 export { Fragment } from './preact.module.d.ts'; ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ui5/webcomponents-base/dist/thirdparty/preact/jsxRuntime.module.d.ts:10:8 - error TS2846: A declaration file cannot be imported without 'import type'. Did you mean to import an implementation file './preact.module.js' instead?

10 } from './preact.module.d.ts'; ~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ui5/webcomponents-base/dist/thirdparty/preact/jsxRuntime.module.d.ts:11:29 - error TS2846: A declaration file cannot be imported without 'import type'. Did you mean to import an implementation file './jsx.js' instead?

11 import { JSXInternal } from './jsx.d.ts'; ~~~~~~~~~~~~

Q: What is the priority of the issue?

A: The priority of the issue is high, as it prevents the Angular project from being built without setting skipLibCheck: true in the tsconfig.json file.

Q: What is the stakeholder info?

A: The stakeholder info is:

  • Organization: SAP LeanIX
  • Business impact: high

Q: What is the workaround for the issue?

A: The workaround for the issue is to set "skipLibCheck": true in the tsconfig.json file. However, this is not a recommended solution, as it may lead to other issues in the project.

Q: What is the solution for the issue?

A: The solution for the issue is to update the @ui5/webcomponents-ngx library to fix the type errors and import declaration files correctly. Alternatively, the Angular project can be configured to ignore the type errors by setting "skipLibCheck": true in the tsconfig.json file. However, this is not a recommended solution, and the issue should be prioritized and resolved as soon as possible.