Support for Angular 14 with Strict-mode enabled

Topic: Support for Angular 14 with Strict-mode enabled

agalliat priority asked 2 years ago

Using the mdb-angular-ui-kit from source with Angular 14 and enabled strict-mode throws many error (with disabled strict-mode they are thrown as warnings), because of uninitialized variables, missing types, deprecation warnings, and many more. Using the prebuild package is not possible, because the peer-dependency of Angular 13. Using the Javascript-only (standard-package) is not possible, because of missing typescript-definitions (*.d.ts)

Are there any plans in near future to support Angular 14 and/or Typescript in the standard package, maybe as a addon?

Arkadiusz Idzikowski staff commented 2 years ago

We are currently working on an update to Angular 14, it should be available within two weeks.

Could you please provide more information about the problems with strict mode? Have you come across any problems that are directly related to our library?

We always try to make sure that our components work correctly regardless of the Typescript settings in the application. We also checked and updated all the code examples in our documentation to make sure they will not throw any errors in the strict mode.

We currently do not have any plans to add typescript-definitions to the Standard library.

Please insert min. 15 characters.

agalliat priority commented 2 years ago

Yes, i can provide you more information regarding the problem with "strict-mode" Since using the npm-package/tgz-package can't be used with Angular 14 (peer-deps require Angular 13), i've tried to include the source files directly. If strict-mode is turned on (the default) with a clean, fresh Angular 14 project and try to include for example the modal dialog, i get many error messages, like those below: (shortened for readability)

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:28:49 - error TS2564: Property '_portalOutlet' has no initializer and is not definitely assigned in the constructor.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:29:42 - error TS2564: Property 'modalDialog' has no initializer and is not definitely assigned in the constructor.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:34:3 - error TS2564: Property '_config' has no initializer and is not definitely assigned in the constructor.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:39:11 - error TS2564: Property '_previouslyFocusedElement' has no initializer and is not definitely assigned in the constructor.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:40:11 - error TS2564: Property '_focusTrap' has no initializer and is not definitely assigned in the constructor.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:45:5 - error TS2322: Type 'boolean | undefined' is not assignable to type 'boolean'. Type 'undefined' is not assignable to type 'boolean'.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:49:5 - error TS7006: Parameter '_document' implicitly has an 'any' type.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:80:11 - error TS2345: Argument of type 'MonoTypeOperatorFunction' is not assignable to parameter of type 'OperatorFunction'. Types of parameters 'source' and 'source' are incompatible. Type 'Observable' is not assignable to type 'Observable'. Type 'unknown' is not assignable to type 'MouseEvent'.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:105:8 - error TS2532: Object is possibly 'undefined'.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:105:46 - error TS2532: Object is possibly 'undefined'.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:110:30 - error TS2532: Object is possibly 'undefined'.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:126:28 - error TS2345: Argument of type '(iframe: HTMLIFrameElement) => void' is not assignable to parameter of type '(value: unknown, index: number, array: unknown[]) => void'.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal-container.component.ts:131:27 - error TS2345: Argument of type '(video: HTMLVideoElement) => void' is not assignable to parameter of type '(value: unknown, index: number, array: unknown[]) => void'.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal.service.ts:21:5 - error TS7006: Parameter '_document' implicitly has an 'any' type.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal.service.ts:79:52 - error TS2345: Argument of type 'null' is not assignable to parameter of type 'ViewContainerRef'.

Error: src/mdb5-ng/code/mdb-angular-ui-kit/modal/modal.service.ts:129:11 - error TS2345: Argument of type 'MonoTypeOperatorFunction' is not assignable to parameter of type 'OperatorFunction'.

If there a any more questions, feel free to ask me.

Yes, i can provide you more information regarding the problem with "strict-mode"
Since using the npm-package/tgz-package can't be used with Angular 14 (peer-deps require Angular 13), i've tried to include the source files directly.
If strict-mode is turned on (the default) with a clean, fresh Angular 14 project and try to include for example the modal dialog, i get many error messages, like those below: (shortened for readability)