Topic: Support for Angular 14 with Strict-mode enabled

agalliat priority asked 1 year 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 1 year 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.


agalliat priority commented 1 year 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.


Arkadiusz Idzikowski staff commented 1 year ago

Thank you for the examples. Maybe the problems are caused by this different configuration, we never saw errors related to the component internal code when using normal npm installation. But we will make sure to check that during the migration to Angular 14.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No