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" />

Mihai Gutan 4 months ago

Angular Metronic

4 Answers

Replies (4)

Faizal Author4 months ago

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

Julien H 4 months ago

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...
â•µ ~~~~~~~

Julien H 4 months ago

Hi, i have the same problem ...

Mihai Gutan 4 months ago

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.

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds

Metronic 9 in a new application on Angular

Replies (4)

Metronic

Products

Legal & Statements

Stay Connected

Templates byMetronic Creators

CreativeDesign Resources

We are proud towork with Experts

Metronic 9 in a new application on Angular

Replies (4)

Metronic

Templates by
Metronic Creators

Creative
Design Resources

We are proud to
work with Experts