Ionic component not rendering on deployed Angular app

[AVerheecke]

I am facing an issue with my Angular app which is hosted through Netlify. The application uses some ionic components here and there. The issue is that, when deployed, or locally with ‘netlify serve’, the components are not rendered. The html I there but when I inspect it, it returns that the size of the element is 0x0. There don’t appear to be any log errors when building.

My Netlify site is https://medialist.netlify.app
The repo for it is https://github.com/AlexanderVerheecke/collections-app

I have looked at previous topics in regards to this but I have been unable to find anything.

The expected result is this:
There should be a dropdown bar with ‘Default label’ and ‘Favourite fruit’. Pressing it should open a modal.

This is missing in the netlify site.

Given that I works when I use ‘ng serve’, I believe that the issue is that something in the build process with netlify is going wrong, maybe I have not configured it correctly

[nathanmartin]

@AVerheecke I do not believe this to be due to Netlify, but rather a difference between what your project does for ng serve compared to ng build.

If I run npm run develop I see:

If I run npm run build && npx serve dist/collections-app/browser I see:

Unfortunately I can’t advise precisely how you should fix it, but it gives you an angle to investigate and you should find it much faster to debug locally than doing repeated deployments to Netlify.

[AVerheecke]

Thanks for the help, it was indeed a discrepancy between how ng serve and ng build were working. The optimisation in the build was the root cause, changing that made it work!