New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Metronic tailwind Integration in angular project


I imported the dist/assets folder into my src directory, made the required configurations, and then tried to adapt my app.component.html to demo1/index.html.

Thank you for helping me resolve this issue.


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


Hi

At this moment, demos 1 through 8 for the Metronic Tailwind Angular integration are fully set up and ready. If want to get started, you can work with any of these available demos straight away. Demos 9 and 10, however, are still being finalized. The team is actively working on them, and they should be released soon.

You’ll find the official Angular integration resources, including setup instructions and the latest updates, on the Keenthemes GitHub repository:
https://github.com/keenthemes/metronic-tailwind-html-integration/tree/dev-frameworks/metronic-tailwind-angular

If you run into any trouble or need guidance while using demos 1–8, please let us know. We appreciate your patience as the final demos are completed.

You can access the demo page by url /demo1, /demo2, and so on.



Hello Faizal,

Thank you very much for the team's efforts.

I downloaded the integration project and I'm getting some errors after launching it via ng serve.

Here's the error:

X [ERROR] Could not resolve "src/assets/vendors/apexcharts/apexcharts.css"

angular:styles/global:styles:3:8:
3 │ @import 'src/assets/vendors/apexcharts/apexcharts.css';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "src/assets/vendors/apexcharts/apexcharts.css" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


X [ERROR] Could not resolve "src/assets/vendors/keenicons/styles.bundle.css"

angular:styles/global:styles:4:8:
4 │ @import 'src/assets/vendors/keenicons/styles.bundle.css';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "src/assets/vendors/keenicons/styles.bundle.css" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


X [ERROR] Could not resolve "src/assets/css/styles.css"

angular:styles/global:styles:5:8:
5 │ @import 'src/assets/css/styles.css';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~

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


X [ERROR] Could not resolve "src/assets/js/core.bundle.js" [plugin angular-script-global]



Sorry for the inconvenience, I forgot to copy the assets folder to src/.

It's starting now.

Thanks.



Hi Romaric Babatundé

We are releasing a simplified version boilerplate for Angular integration.
Hopefully will be released by today

Thanks



Hello Faizal,

Thank you for your diligence.

I would like to know if this version is already available.

Thank you.


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