2

I have an angular 8 application that I have developed and the CSS for all components are in each component's corresponding.

When I run ng serve all CSS renders correctly where I want it to.

However anytime I run ng build --prod to prepare files for hosting after deploying those files to my url, every single component is used in by 10%-20% this throws off all my divs and styling and causes a terrible user experience.

I ran ng build --prod --extractCss=false then deployed those files and the same issue happened.

Is there anything anyone can suggest to either get the ng build --prod command to function like ng serve with certain flags or a path issue with css that I can try to fix.

Any help is greatly appreciated!

UPDATE: just ran "ng build --prod --aot=false --output-hashing=media --sourceMap=true --extract-css=false --buildOptimizer=false"

And that still didn't fix the issue. It's almost like the CSS is just zooming in by 10%, which is enough to throw off all my divs, padding etc.

EXAMPLE: On a page that has no scroll feature when run using ng serve, after running the ng buld --prod command from above including all the flags, the page now has the ability scroll

Improve this question

1 Answer 1

Reset to default
3

Per Angular-cli's github wiki v2+, these are the most common ways to initiate a dev and production build

ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build
There are different default flags that will affect --dev vs --prod builds.

Flag                 --dev      --prod
--aot                false      true
--environment        dev        prod
--output-hashing     media      all
--sourcemaps         true       false
--extract-css        false      true```
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

When I run my dev localhost where everything works I am only typing "ng serve". When I run "ng build --prod" all the css is thrown off. Do you know which of the flags you listed above could b causeing my problem? I have tried several different time with each one and it still isn't working
ng build --prod --aot=false --output-hashing=media --sourceMap=true --extract-css=false --buildOptimizer=false ^^^ ended up being the command that fixed the issue then I also had to "zoom out" a little in my google chrome browser for a few of the issues. Guessing that there are a few parts of the css that need to be dynamic

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.