Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Lot of errors with Metronic 9 and Angular 18


Hi,

I have a lot of errors with Metronic 9 & Angular 18 on the last step :

import { Component, OnInit } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { HTTP_INTERCEPTORS } from "@angular/common/http";
import { TokenInterceptorService } from "./core/auth/token-interceptor.service";
import { ThemeService } from "./theme/theme.service";

@Component({
selector: "app-root",
standalone: true,
imports: [],
providers: [],
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {

constructor(private themeService: ThemeService) { }

ngAfterViewInit(): void {
this.themeService.init();
}
}


After adding :

constructor(private themeService: ThemeService) { }

ngAfterViewInit(): void {
this.themeService.init();
}


We have a lot of errors :

✘ [ERROR] TS2345: Argument of type '(event: Event, target: HTMLElement) => void' is not assignable to parameter of type 'KTCallableType'.
Types of parameters 'event' and 'event' are incompatible.
Type 'Event | undefined' is not assignable to type 'Event'.
Type 'undefined' is not assignable to type 'Event'. [plugin angular-compiler]

src/theme/core/components/menu/menu.ts:1133:3:
1133 │ (event: Event, target: HTMLElement) => {
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2345: Argument of type '(event: Event, target: HTMLElement) => void' is not assignable to parameter of type 'KTCallableType'.
Types of parameters 'event' and 'event' are incompatible.
Type 'Event | undefined' is not assignable to type 'Event'.
Type 'undefined' is not assignable to type 'Event'. [plugin angular-compiler]

src/theme/core/components/menu/menu.ts:1146:3:
1146 │ (event: Event, target: HTMLElement) => {
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2345: Argument of type '(event: Event, target: HTMLElement) => void' is not assignable to parameter of type 'KTCallableType'.
Types of parameters 'event' and 'event' are incompatible.
Type 'Event | undefined' is not assignable to type 'Event'.
Type 'undefined' is not assignable to type 'Event'. [plugin angular-compiler]

src/theme/core/components/menu/menu.ts:1161:3:
1161 │ (event: Event, target: HTMLElement) => {
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2531: Object is possibly 'null'. [plugin angular-compiler]

src/theme/core/components/modal/modal.ts:48:4:
48 │ this._element.addEventListener('click', (event: Event) => {
╵ ~~~~~~~~~~~~~


✘ [ERROR] TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'.
Type 'null' is not assignable to type 'HTMLElement'. [plugin angular-compiler]

src/theme/core/components/modal/modal.ts:169:34:
169 │ ...(parseInt(KTDom.getCssProp(this._element, 'z-index')) > zindex) {
╵ ~~~~~~~~~~~~~


✘ [ERROR] TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'.
Type 'null' is not assignable to type 'HTMLElement'. [plugin angular-compiler]

src/theme/core/components/modal/modal.ts:170:41:
170 │ zindex = parseInt(KTDom.getCssProp(this._element, 'z-index'));
╵ ~~~~~~~~~~~~~

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 (11)


Hi Julien H,

We have released a sample project for Metronic Angular to help you get started.

https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/frontend/angular

https://github.com/KeenthemesHub/metronic-tailwind-html-integration



Hi, thanks a lot i will try this today ! happy



We are currently working on releasing demo integration apps for Angular and other frameworks as soon as possible. These demos will assist users with the integration process.

Thank you for your patience.



Great neew thanks a lot !



Hi Julien Houyet,

Have you updated the src folder from Metronic v9.0.1? Could you please share the screenshot of the error from your console log?

Thank you



Hi,

Yes i have upload the latest 9.0.1.

Here the screen with and without the //KTSticky.init(); in theme/core/index.ts

<img src="https://i.ibb.co/PxQ5mZs/Screenshot-2024-07-02-at-13-29-54.png" />

<img src="https://i.ibb.co/HYWnyt0/Screenshot-2024-07-02-at-13-29-36.png" />

I have try to add a modal code from your Documentation for testing, the button appaer but the modal don't open.



Hi Julien Houyet,

The guide only helps with the assets integration, which is why the page is blank—you don't have any HTML code on the page. Please refer to the HTML version template to copy the HTML code and create the page for your Angular project.

Additionally, in Step 2 from the
https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/frontend/angular#integrate-core
ensure you have added the following code in your `theme.service.ts` file:

// theme.service.ts
import { Injectable } from "@angular/core";
import KTComponents from "../theme/core/index.spa";
declare var KTLayout: any;

@Injectable({
providedIn: "root"
})
export class ThemeService {
init(): void {
KTComponents.init();
KTLayout.init();
}
}


Just in case Metronic does not fulfill your project requirements you may request a refund using Themeforest Refund Form. 100% money back is guaranteed.

Best regards,



I have been follow the tutorial.

My bad, when I remove this line : //KTSticky.init();

I don’t see a blank page, I see my login form but I have errors in the console.

And If a uncomment the line I have a blank page with error console.

I don’t want a refund I love your work ♥️



Hi Julien Houyet,

We just released an update. Could you please try to copy again the src folder and follow additional steps in the docs? This should fix the issues.

Thank you



Hi, thanks !

Now i don't have any errors in terminal but a blank page on home with this errors on the console :


Uncaught TypeError: Cannot read properties of undefined (reading "init")
at Object.init (index.ts:68:14)
at index.ts:83:16
at Object.ready (dom.ts:360:7)
at index.ts:82:7


And warning :


Page reload sent to client(s).
Initial chunk files | Names | Raw size
main.js | main | 221.35 kB |

Application bundle generation complete. [0.181 seconds]

&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:430:2:
430 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:443:2:
443 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:498:2:
498 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:537:2:
537 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:576:2:
576 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:615:2:
615 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:654:2:
654 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:693:2:
693 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:732:2:
732 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:771:2:
771 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:810:2:
810 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


Page reload sent to client(s).
Initial chunk files | Names | Raw size
main.js | main | 221.41 kB |

Application bundle generation complete. [0.244 seconds]

&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:430:2:
430 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:443:2:
443 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:498:2:
498 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:537:2:
537 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:576:2:
576 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:615:2:
615 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:654:2:
654 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:693:2:
693 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:732:2:
732 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:771:2:
771 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


&acirc;&#150;&sup2; [WARNING] Unexpected "{" [css-syntax-error]

src/styles.scss:810:2:
810 &acirc;&#148;&#130; {
&acirc;&#149;&micro; ^


Page reload sent to client(s).


When i add :


constructor(private themeService: ThemeService) { }

ngAfterViewInit(): void {
this.themeService.init();
}


If i comment this line in theme/core/index.ts

//KTSticky.init();

I have this on the console :


ERROR ReferenceError: KTLayout is not defined
at _ThemeService.init (theme.service.ts:12:3)
at _AppComponent.ngAfterViewInit (app.component.ts:29:21)
at callHookInternal (core.mjs:5151:14)
at callHook (core.mjs:5178:13)
at callHooks (core.mjs:5132:17)
at executeInitAndCheckHooks (core.mjs:5082:9)
at refreshView (core.mjs:13245:21)
at detectChangesInView (core.mjs:13386:9)
at detectChangesInViewWhileDirty (core.mjs:13081:9)
at detectChangesInternal (core.mjs:13060:9)



I fixed all these errors manually in

theme/core/components


But anyway it didn't start, now I have errors.
In terminal:

[WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:431:2:
431 &acirc;&#148;&#130; {


In browser console:

main.ts:5 ERROR ReferenceError: KTLayout is not defined
at _ThemeService.init (theme.service.ts:11:5)
at _AppComponent.ngAfterViewInit (app.component.ts:19:23)
at callHookInternal (core.mjs:5136:14)
at callHook (core.mjs:5163:13)
at callHooks (core.mjs:5118:17)
at executeInitAndCheckHooks (core.mjs:5068:9)
at refreshView (core.mjs:12862:21)
at detectChangesInView$1 (core.mjs:13015:9)
at detectChangesInViewWhileDirty (core.mjs:12732:5)
at detectChangesInternal (core.mjs:12714:9)


I think something else is missing in the documentation


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  :(