Metronic angular 8 update angular 12

Hi guys,

My name is Larissa and I’m writing from Brazil. We’ve been using your Metronic template, which we bought along with Angular 8. However, with the advancement of Angular versions, we are currently advancing to version 12. But, on doing this, the template presented some errors regarding the menu code.

Could you possibly help us on this issue?

If not, is it possible for you to provide us the code with the menu correction?

The point is: we don’t want to change the template again, for in the new versions of the templates you are going to change the CSS classes, and that possibly bring a great deal of trouble for us.


These are one of the mistakes that happens. But I believe it's all about the same thing:

Error: src/app/core/directives/menu-aside-toggle.directive.ts:11:21 - error TS2304: Cannot find name 'mToggle'.

11 this.toggle = new mToggle(this.el.nativeElement, {
~~~~~~~


Error: src/app/core/directives/menu-aside.directive.ts:44:7 - error TS2304: Cannot find name 'mUtil'.

44 if (mUtil.attr(this.el.nativeElement, 'm-menu-dropdown') === '1') {
~~~~~


Error: src/app/core/directives/menu-aside.directive.ts:49:7 - error TS2304: Cannot find name 'mUtil'.

49 if (mUtil.attr(this.el.nativeElement, 'm-menu-scrollable') === '1') {
~~~~~


Error: src/app/core/directives/menu-aside.directive.ts:53:13 - error TS2304: Cannot find name 'mUtil'.

53 return mUtil.getViewPort().height - headerHeight;

Looking forward for your response.

Thanks in advance,

Larissa Guimaraes

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

Hi,

We aren't able to give you the exact code, cause in Angular 12 we use TypeScript ready Menu+KTUtils. Anyway, we will try to forward you the solution.
You can use Declaration files in your Angular app, follow the next example. how to add 3dparty JS libraries (without Typescript support) https://www.techiediaries.com/use-javascript-in-angular/.
Try to declare Menu+KTUtils in the same way, maybe it will help you.

Regards,
Keenthemes support

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(