How can I replace my old Angular landing page with a new Angular 19 + Tailwind template while...

I'm trying to replace the landing page of my existing Angular project with a new template I purchased. Here's the situation:

• My original project was built using Angular 13, and it includes a dashboard based on Metronic 7, which I want to keep.
• I upgraded the project to Angular 15, and everything was mostly fine up to that point.
• I attempted to upgrade to Angular 16, but ran into multiple errors and breaking changes.
• The new landing page template I want to use is built with Angular 19 and uses Tailwind CSS v4.
• I tried downgrading the template to Angular 15 to match my main project, and although I got it to run, it introduced many layout and style issues, likely due to Tailwind and Angular differences.

At this point, I’m looking for the most reliable and maintainable way to:

• Replace the old landing page with the new Angular 19 + Tailwind 4 template
• Keep the existing Metronic 7 dashboard (currently stable on Angular 15)
• Avoid major compatibility or styling conflicts between the two parts

What’s the best approach to handle this scenario?

Should I:

• Separate the landing page and dashboard into different Angular apps (e.g. mono-repo or micro frontends)?
• Try to upgrade the whole project to Angular 19 and reconcile Tailwind with Metronic styles?
• Use routing to load the landing and dashboard parts independently?

Any advice or experience on how to handle such integration (especially when involving different UI frameworks like Tailwind and Metronic) would be greatly appreciated. Thanks!

Continue reading...