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'));
╵ ~~~~~~~~~~~~~
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 ! 
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:7And 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]
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:430:2:
430 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:443:2:
443 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:498:2:
498 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:537:2:
537 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:576:2:
576 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:615:2:
615 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:654:2:
654 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:693:2:
693 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:732:2:
732 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:771:2:
771 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:810:2:
810 │ {
╵ ^
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]
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:430:2:
430 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:443:2:
443 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:498:2:
498 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:537:2:
537 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:576:2:
576 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:615:2:
615 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:654:2:
654 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:693:2:
693 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:732:2:
732 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:771:2:
771 │ {
╵ ^
â–² [WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:810:2:
810 │ {
╵ ^
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/componentsBut anyway it didn't start, now I have errors.
In terminal:
[WARNING] Unexpected "{" [css-syntax-error]
src/styles.scss:431:2:
431 │ {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
