Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update

Metronic 9.2.0 issues for Angular


I had followed step by step instructions for the Angular integration, and facing many issues.

i get the following errors when I run "ng serve"

I appreciate if you can update the github repo for angular with metronic 9.2.0 least as a baseline.

Application bundle generation failed. [1.552 seconds]

â–² [WARNING] All "@import" rules must come first [invalid-@import]

src/assets/metronic/css/styles.css:8:0:
8 │ @import "./config.ktui";
╵ ~~~~~~~

This rule cannot come before an "@import" rule

src/assets/metronic/css/styles.css:5:0:
5 │ @source '../../dist/assets/vendors/ktui/';
╵ ^


â–² [WARNING] All "@import" rules must come first [invalid-@import]

src/assets/metronic/css/styles.css:11:0:
11 │ @import '../../node_modules/@keenthemes/ktui/styles.css';
╵ ~~~~~~~

This rule cannot come before an "@import" rule

src/assets/metronic/css/styles.css:5:0:
5 │ @source '../../dist/assets/vendors/ktui/';
╵ ^


â–² [WARNING] All "@import" rules must come first [invalid-@import]

src/assets/metronic/css/styles.css:14:0:
14 │ @import "./components/index";
╵ ~~~~~~~

This rule cannot come before an "@import" rule

src/assets/metronic/css/styles.css:5:0:
5 │ @source '../../dist/assets/vendors/ktui/';
╵ ^


â–² [WARNING] All "@import" rules must come first [invalid-@import]

src/assets/metronic/css/styles.css:17:0:
17 │ @import "./demos/demo1.css";
╵ ~~~~~~~

This rule cannot come before an "@import" rule

src/assets/metronic/css/styles.css:5:0:
5 │ @source '../../dist/assets/vendors/ktui/';
╵ ^


✘ [ERROR] Could not resolve "tailwindcss"

src/assets/metronic/css/styles.css:2:8:
2 │ @import 'tailwindcss';
╵ ~~~~~~~~~~~~~

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


✘ [ERROR] Could not resolve "node_modules/@keenthemes/ktui/dist/ktui.js" [plugin angular-script-global]


Watch mode enabled. Watching for file changes...


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

Replies (1)


Having the same issues, hoping for a soon update


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