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

Metronic 9 in a new application on Angular


I'm trying to install Metronic 9 in a new application on Angular and I have the impression that the folder names are messed up in the guide https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/frontend/angular. It says that src must be copied to src in angular and renamed in theme, but in the import the assest directory is used. With the Core installation, it still doesn't work. If you follow the guide, the angular application does not start, only errors that you cannot find one or another component. Anyone got Metronic 9 up on Angular? What is the solution?


node -v // v18.20.3
ng --version // 18.0.6
npm --version // 10.7.0


I downladed Metronic 9 from Themeforest
My root of metronic 9 folder:
<img src="https://i.imgur.com/Tb4cRHm.png" />

Metronic 9 src folder:
<img src="https://i.imgur.com/TFfgXWS.png" />


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


Hi Mihai Gutan

Thank you for your feedback. We have updated the docs with the latest instructions.

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

Thank you



Hi, thanks.

Now i have a bug 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'));
╵ ~~~~~~~~~~~~~


✘ [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:173:31:
173 │ if (KTDom.getHighestZindex(this._element) > 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:174:37:
174 │ zindex =KTDom.getHighestZindex(this._element) + 1;
╵ ~~~~~~~~~~~~~


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

src/theme/core/components/modal/modal.ts:177:4:
177 │ this._element.style.zIndex = String(zindex);
╵ ~~~~~~~~~~~~~


✘ [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/modal/modal.ts:250:69:
250 │ ...modal-toggle]', 'click', (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/modal/modal.ts:265:70:
265 │ ...odal-dismiss]', 'click', (event: Event, target: HTMLElement) => {
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/reparent/reparent.ts:31:22:
31 │ this._buildConfig(config);
╵ ~~~~~~


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

src/theme/core/components/scrollspy/scrollspy.ts:45:12:
45 │ return (this._element.getAttribute('data-scrollspy-target') as...
╵ ~~~~~~~~~~~~~


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

src/theme/core/components/scrollspy/scrollspy.ts:51:4:
51 │ this._targetElement.addEventListener('scroll', () => {
╵ ~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/scrollspy/scrollspy.ts:52:6:
52 │ this._anchorElements.forEach((anchorElement) => {
╵ ~~~~~~~~~~~~~~~~~~~~


✘ [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/scrollspy/scrollspy.ts:57:22:
57 │ KTEventHandler.on(this._element, '[data-scrollspy-anchor]', 'c...
╵ ~~~~~~~~~~~~~


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

src/theme/core/components/scrollspy/scrollspy.ts:66:44:
66 │ ...ionElement = KTDom.getElement(anchorElement.getAttribute('href'));
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/scrollspy/scrollspy.ts:89:44:
89 │ ...ionElement = KTDom.getElement(anchorElement.getAttribute('href'));
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2564: Property '_targetElement' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

src/theme/core/components/scrollto/scrollto.ts:18:12:
18 │ protected _targetElement: HTMLElement;
╵ ~~~~~~~~~~~~~~


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

src/theme/core/components/scrollto/scrollto.ts:30:4:
30 │ this._targetElement = this._getTargetElement();
╵ ~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/scrollto/scrollto.ts:41:23:
41 │ KTDom.getElement(this._element.getAttribute('data-scrollto')...
╵ ~~~~~~~~~~~~~


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

src/theme/core/components/stepper/stepper.ts:26:22:
26 │ this._buildConfig(config);
╵ ~~~~~~


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

src/theme/core/components/stepper/stepper.ts:80:46:
80 │ ...ent = KTDom.getElement(element.getAttribute('data-stepper-item'));
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/stepper/stepper.ts:107:4:
107 │ this._element.querySelectorAll('[data-stepper-item]').forEach...
╵ ~~~~~~~~~~~~~


✘ [ERROR] TS2564: Property '_attributeRoot' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

src/theme/core/components/sticky/sticky.ts:26:12:
26 │ protected _attributeRoot: string;
╵ ~~~~~~~~~~~~~~


✘ [ERROR] TS2564: Property '_eventTriggerState' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

src/theme/core/components/sticky/sticky.ts:27:12:
27 │ protected _eventTriggerState: boolean;
╵ ~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2564: Property '_lastScrollTop' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

src/theme/core/components/sticky/sticky.ts:28:12:
28 │ protected _lastScrollTop: number;
╵ ~~~~~~~~~~~~~~


✘ [ERROR] TS2564: Property '_releaseElement' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

src/theme/core/components/sticky/sticky.ts:29:12:
29 │ protected _releaseElement: HTMLElement;
╵ ~~~~~~~~~~~~~~~


✘ [ERROR] TS2564: Property '_wrapperElement' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

src/theme/core/components/sticky/sticky.ts:30:12:
30 │ protected _wrapperElement: HTMLElement;
╵ ~~~~~~~~~~~~~~~


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

src/theme/core/components/sticky/sticky.ts:38:22:
38 │ this._buildConfig(config);
╵ ~~~~~~


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

src/theme/core/components/sticky/sticky.ts:41:4:
41 │ this._wrapperElement = this._element.closest('[data-sticky-wra...
╵ ~~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/sticky/sticky.ts:41:27:
41 │ this._wrapperElement = this._element.closest('[data-sticky-wra...
╵ ~~~~~~~~~~~~~


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

src/theme/core/components/sticky/sticky.ts:293:11:
293 │ return this._element.classList.contains('active');
╵ ~~~~~~~~~~~~~


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

src/theme/core/components/tabs/tabs.ts:42:79:
42 │ ...etElement(this._currentTabElement.getAttribute('data-tab-toggle...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/tabs/tabs.ts:42:156:
42 │ ....getElement(this._currentTabElement.getAttribute('href')))|| null;
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [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/tabs/tabs.ts:50:67:
50 │ ...ta-tab-toggle]', 'click', (event: Event, target: HTMLElement) => {
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [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/tabs/tabs.ts:69:35:
69 │ ...DropdownToggleElement(this._lastTabElement)?.classList.remove('...
╵ ~~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/tabs/tabs.ts:73:51:
73 │ ...getElement(tabElement.getAttribute('data-tab-toggle')) || KTDom...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/tabs/tabs.ts:73:115:
73 │ ...ab-toggle')) || KTDom.getElement(tabElement.getAttribute('href'));
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/tabs/tabs.ts:84:6:
84 │ this._currentContentElement.style.opacity = '';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/tabs/tabs.ts:95:6:
95 │ return containerElement.querySelector('.dropdown-toggle');
╵ ~~~~~~


✘ [ERROR] TS2322: Type 'null' is not assignable to type 'HTMLElement'. [plugin angular-compiler]

src/theme/core/components/tabs/tabs.ts:97:6:
97 │ return null;
╵ ~~~~~~


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

src/theme/core/components/theme/theme.ts:27:22:
27 │ this._buildConfig(config);
╵ ~~~~~~


✘ [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/theme/theme.ts:39:69:
39 │ ...-theme-switch]', 'click', (event: Event, target: HTMLElement) => {
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2564: Property '_triggerElement' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

src/theme/core/components/toggle-password/toggle-password.ts:15:12:
15 │ protected _triggerElement: HTMLElement;
╵ ~~~~~~~~~~~~~~~


✘ [ERROR] TS2564: Property '_inputElement' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

src/theme/core/components/toggle-password/toggle-password.ts:16:12:
16 │ protected _inputElement: HTMLInputElement;
╵ ~~~~~~~~~~~~~


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

src/theme/core/components/toggle-password/toggle-password.ts:24:22:
24 │ this._buildConfig(config);
╵ ~~~~~~


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

src/theme/core/components/toggle-password/toggle-password.ts:26:4:
26 │ this._triggerElement = this._element.querySelector('[data-togg...
╵ ~~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/toggle-password/toggle-password.ts:26:27:
26 │ this._triggerElement = this._element.querySelector('[data-togg...
╵ ~~~~~~~~~~~~~


✘ [ERROR] TS2322: Type 'HTMLInputElement | null' is not assignable to type 'HTMLInputElement'.
Type 'null' is not assignable to type 'HTMLInputElement'. [plugin angular-compiler]

src/theme/core/components/toggle-password/toggle-password.ts:27:4:
27 │ this._inputElement = this._element.querySelector('input[type="...
╵ ~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/toggle-password/toggle-password.ts:27:25:
27 │ this._inputElement = this._element.querySelector('input[type="...
╵ ~~~~~~~~~~~~~


✘ [ERROR] TS2564: Property '_targetElement' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

src/theme/core/components/toggle/toggle.ts:19:12:
19 │ protected _targetElement: HTMLElement;
╵ ~~~~~~~~~~~~~~


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

src/theme/core/components/toggle/toggle.ts:27:22:
27 │ this._buildConfig(config);
╵ ~~~~~~


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

src/theme/core/components/toggle/toggle.ts:29:4:
29 │ this._targetElement = this._getTargetElement();
╵ ~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/toggle/toggle.ts:47:23:
47 │ KTDom.getElement(this._element.getAttribute('data-toggle') a...
╵ ~~~~~~~~~~~~~


✘ [ERROR] TS2564: Property '_targetElement' has no initializer and is not definitely assigned in the constructor. [plugin angular-compiler]

src/theme/core/components/tooltip/tooltip.ts:36:12:
36 │ protected _targetElement: HTMLElement;
╵ ~~~~~~~~~~~~~~


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

src/theme/core/components/tooltip/tooltip.ts:47:22:
47 │ this._buildConfig(config);
╵ ~~~~~~


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

src/theme/core/components/tooltip/tooltip.ts:49:4:
49 │ this._targetElement = this._getTargetElement();
╵ ~~~~~~~~~~~~~~~~~~~


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

src/theme/core/components/tooltip/tooltip.ts:59:23:
59 │ KTDom.getElement(this._element.getAttribute('data-tooltip') ...
╵ ~~~~~~~~~~~~~


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

src/theme/core/components/tooltip/tooltip.ts:60:6:
60 │ this._element.querySelector('.tooltip, .popover, [data-toolt...
╵ ~~~~~~~~~~~~~


✘ [ERROR] TS2366: Function lacks ending return statement and return type does not include 'undefined'. [plugin angular-compiler]

src/theme/core/components/tooltip/tooltip.ts:176:29:
176 │ protected _createPopper(): object {
╵ ~~~~~~


✘ [ERROR] TS2322: Type 'undefined' is not assignable to type 'object'. [plugin angular-compiler]

src/theme/core/components/tooltip/tooltip.ts:177:24:
177 │ if (!this._element) return;
╵ ~~~~~~


✘ [ERROR] TS2322: Type 'undefined' is not assignable to type 'object'. [plugin angular-compiler]

src/theme/core/components/tooltip/tooltip.ts:182:6:
182 │ return
╵ ~~~~~~


✘ [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/tooltip/tooltip.ts:216:34:
216 │ ...(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/tooltip/tooltip.ts:217:41:
217 │ zindex = parseInt(KTDom.getCssProp(this._element, 'z-index'));
╵ ~~~~~~~~~~~~~


✘ [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/tooltip/tooltip.ts:220:31:
220 │ if (KTDom.getHighestZindex(this._element) > 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/tooltip/tooltip.ts:221:37:
221 │ zindex =KTDom.getHighestZindex(this._element) + 1;
╵ ~~~~~~~~~~~~~


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

src/theme/core/helpers/dom.ts:15:23:
15 │ if (this.isElement(element)) {
╵ ~~~~~~~


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

src/theme/core/helpers/dom.ts:20:6:
20 │ return document.querySelector(KTUtils.parseSelector((element...
╵ ~~~~~~


✘ [ERROR] TS2322: Type 'null' is not assignable to type 'HTMLElement'. [plugin angular-compiler]

src/theme/core/helpers/dom.ts:23:4:
23 │ return null;
╵ ~~~~~~


✘ [ERROR] TS2322: Type 'null' is not assignable to type 'HTMLElement[]'. [plugin angular-compiler]

src/theme/core/helpers/dom.ts:152:6:
152 │ return null;
╵ ~~~~~~


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

src/theme/core/helpers/dom.ts:171:4:
171 │ return children ? children[0] : null;
╵ ~~~~~~


✘ [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/helpers/dom.ts:272:40:
272 │ return this.isParentOrElementHidden(element.parentElement);
╵ ~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
No index signature with a parameter of type 'string' was found on type '{}'. [plugin angular-compiler]

src/theme/core/helpers/dom.ts:348:6:
348 │ attributes[normalizedKey] = KTUtils.parseDataAttribute(elem...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~


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

src/theme/core/helpers/dom.ts:348:61:
348 │ ...ormalizedKey] = KTUtils.parseDataAttribute(element.dataset[key]);
╵ ~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2322: Type 'undefined' is not assignable to type 'string'. [plugin angular-compiler]

src/theme/core/helpers/event-handler.ts:13:6:
13 │ return;
╵ ~~~~~~


✘ [ERROR] TS2322: Type '(event: Event & { target: HTMLElement;}) => void' is not assignable to type 'KTCallableType'.
Types of parameters 'event' and 'event' are incompatible.
Type 'Event | undefined' is not assignable to type 'Event & { target: HTMLElement; }'.
Type 'undefined' is not assignable to type 'Event & { target: HTMLElement; }'.
Type 'undefined' is not assignable to type 'Event'. [plugin angular-compiler]

src/theme/core/helpers/event-handler.ts:18:4:
18 │ KTDelegatedEventHandlers[eventId] = (event: Event & {target: H...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


✘ [ERROR] TS2322: Type 'null' is not assignable to type 'KTOptionType'. [plugin angular-compiler]

src/theme/core/helpers/utils.ts:42:3:
42 │ return null;
╵ ~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/menu/index"' has no default export. Did you mean to use 'import { KTMenu } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/menu/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:12:7:
12 │ import KTMenu from './components/menu';
╵ ~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/dropdown/index"' has no default export. Did you mean to use 'import { KTDropdown } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/dropdown/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:13:7:
13 │ import KTDropdown from './components/dropdown';
╵ ~~~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/modal/index"' has no default export. Did you mean to use 'import { KTModal } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/modal/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:14:7:
14 │ import KTModal from './components/modal';
╵ ~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/drawer/index"' has no default export. Did you mean to use 'import { KTDrawer } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/drawer/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:15:7:
15 │ import KTDrawer from './components/drawer';
╵ ~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/collapse/index"' has no default export. Did you mean to use 'import { KTCollapse } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/collapse/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:16:7:
16 │ import KTCollapse from './components/collapse';
╵ ~~~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/dismiss/index"' has no default export. Did you mean to use 'import { KTDismiss } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/dismiss/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:17:7:
17 │ import KTDismiss from './components/dismiss';
╵ ~~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/tabs/index"' has no default export. Did you mean to use 'import { KTTabs } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/tabs/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:18:7:
18 │ import KTTabs from './components/tabs';
╵ ~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/accordion/index"' has no default export. Did you mean to use 'import { KTAccordion } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/accordion/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:19:7:
19 │ import KTAccordion from './components/accordion';
╵ ~~~~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/scrollspy/index"' has no default export. Did you mean to use 'import { KTScrollspy } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/scrollspy/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:20:7:
20 │ import KTScrollspy from './components/scrollspy';
╵ ~~~~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/scrollable/index"' has no default export. Did you mean to use 'import { KTScrollable } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/scrollable/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:21:7:
21 │ import KTScrollable from './components/scrollable';
╵ ~~~~~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/scrollto/index"' has no default export. Did you mean to use 'import { KTScrollto } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/scrollto/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:22:7:
22 │ import KTScrollto from './components/scrollto';
╵ ~~~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/sticky/index"' has no default export. Did you mean to use 'import { KTSticky } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/sticky/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:23:7:
23 │ import KTSticky from './components/sticky';
╵ ~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/reparent/index"' has no default export. Did you mean to use 'import { KTReparent } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/reparent/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:24:7:
24 │ import KTReparent from './components/reparent';
╵ ~~~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/toggle/index"' has no default export. Did you mean to use 'import { KTToggle } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/toggle/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:25:7:
25 │ import KTToggle from './components/toggle';
╵ ~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/tooltip/index"' has no default export. Did you mean to use 'import { KTTooltip } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/tooltip/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:26:7:
26 │ import KTTooltip from './components/tooltip';
╵ ~~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/stepper/index"' has no default export. Did you mean to use 'import { KTStepper } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/stepper/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:27:7:
27 │ import KTStepper from './components/stepper';
╵ ~~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/theme/index"' has no default export. Did you mean to use 'import { KTTheme } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/theme/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:28:7:
28 │ import KTTheme from './components/theme';
╵ ~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/image-input/index"' has no default export. Did you mean to use 'import { KTImageInput } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/image-input/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:29:7:
29 │ import KTImageInput from './components/image-input';
╵ ~~~~~~~~~~~~


✘ [ERROR] TS2613: Module '"/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/toggle-password/index"' has no default export. Did you mean to use 'import { KTTogglePassword } from "/Users/julienhouyet/Developer/MJ-Pharma/Admin/frontend/src/theme/core/components/toggle-password/index"' instead? [plugin angular-compiler]

src/theme/core/index.spa.ts:30:7:
30 │ import KTTogglePassword from './components/toggle-password';
╵ ~~~~~~~~~~~~~~~~


✘ [ERROR] TS2305: Module '"./components/menu"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:35:9:
35 │ export { default as KTMenu } from './components/menu';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/dropdown"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:36:9:
36 │ export { default as KTDropdown } from './components/dropdown';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/modal"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:37:9:
37 │ export { default as KTModal } from './components/modal';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/drawer"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:38:9:
38 │ export { default as KTDrawer } from './components/drawer';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/collapse"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:39:9:
39 │ export { default as KTCollapse } from './components/collapse';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/dismiss"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:40:9:
40 │ export { default as KTDismiss } from './components/dismiss';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/scrollspy"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:41:9:
41 │ export { default as KTTabs } from './components/scrollspy';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/accordion"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:42:9:
42 │ export { default as KTAccordion } from './components/accordion';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/scrollspy"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:43:9:
43 │ export { default as KTScrollspy } from './components/scrollspy';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/scrollable"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:44:9:
44 │ export { default as KTScrollable } from './components/scrollable';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/scrollto"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:45:9:
45 │ export { default as KTScrollto } from './components/scrollto';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/sticky"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:46:9:
46 │ export { default as KTSticky } from './components/sticky';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/reparent"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:47:9:
47 │ export { default as KTReparent } from './components/reparent';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/toggle"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:48:9:
48 │ export { default as KTToggle } from './components/toggle'
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/tooltip"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:49:9:
49 │ export { default as KTTooltip } from './components/tooltip';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/stepper"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:50:9:
50 │ export { default as KTStepper } from './components/stepper';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/theme"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:51:9:
51 │ export { default as KTTheme } from './components/theme';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/image-input"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:52:9:
52 │ export { default as KTImageInput} from './components/image-input';
╵ ~~~~~~~


✘ [ERROR] TS2305: Module '"./components/toggle-password"' has no exported member 'default'. [plugin angular-compiler]

src/theme/core/index.spa.ts:53:9:
53 │ export { default as KTTogglePassword} from './components/toggle-pa...
╵ ~~~~~~~


Hi, i have the same problem ...



Also, I have a problem with tailwindcss. I added it to package.json

"tailwindcss": "^3.4.4",


but I got the errors:

[ERROR] Could not resolve "tailwindcss/base"
src/theme/css/styles.css:2:8:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

You can mark the path "tailwindcss/base" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


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