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

Metronics Angular Not Working


I purchased a Metronic theme from ThemeForest, but when I downloaded the files, the Angular folder was missing. I followed the instructions from this link "https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/angular" to install the Angular theme, but the page content is not displaying, and navigation between links isn't working. Could you please help us 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 (3)


Hi Talha Ikram

The empty page you're seeing is actually expected and correct behavior for the Angular boilerplate! This is not an error, it's how the boilerplate is designed to work.

What You Have (Working Perfectly):
- Angular 20 boilerplate - Successfully running and serving
- Tailwind CSS v4+ - Properly configured and loaded
- Layout components - Header, sidebar, footer components ready
- Metronic architecture - Proper component structure in place

The boilerplate provides the foundation and structure for your Metronic Angular app, but it doesn't include:
- Metronic CSS and JavaScript files
- Sample content or demo data
- KTUI interactive components
- Media assets and images

Next Steps to Get Content Displaying:
Copy Metronic Assets: Copy the dist/assets folder from your purchased Metronic Tailwind HTML package into src/assets
Add Your Content: Use the existing component structure to add your actual page content
Initialize Components: The MetronicInitService will handle component initialization once assets are in place



Hi Talha Ikram

The boilerplate expects specific asset files to be present:
- Check your src/assets folder structure:
- Ensure you have copied the dist/assets folder from your Metronic HTML package to src/assets
- Verify these folders exist: vendors/, css/, js/, media/
- Check that src/assets/css/styles.css exists (this is the main Metronic stylesheet)

Thanks



I’ve followed the same structure and guidelines, but it’s still not working. Here’s the recording link showing the 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  :(
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  :(