Topic: Support for Angular 14 with Strict-mode enabled
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: -
- Device:
- Browser:
- OS:
- Provided sample code: No
- Provided link: No
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.
agalliat pro premium 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.
Arkadiusz Idzikowski staff commented 2 years 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.