Angular 4 ng build prod style SyntaxError - css

Question

Angule 4.3.3, angular cli, MVC
When i compile my code in my dev enviroment with ng build all works fine i can see the styling.
but when i do ng build -prod for prodaction enviroment the complitaion success i do get all js bundle files.
but in the browser (Chrome) i get an error:
Uncaught SyntaxError: Invalid or unexpected token
on file styles.14098r3...bundle.css
in my tsconfig.json, the target: "es5".
why in my dev enviroment all works fine but in my prod the style not working?
please help me to resolve this problem.
Edit:
I in dev the html tag for style look like:
<script src="/dist/styles.bundle.js"></script>
but in prod html for style look like:
<script src="/dist/styles.149025e8452.bundle.css">
if i change the prod style tag to link instead script the style work fine.
---I generate the script from mvc bundles---

Answer 1

I've had the same issue. Here's what I ended up doing:
In your bundle config:
bundles.Add(new ScriptBundle("~/bundles/angular-components")
.Include("~/Client/app/dist/inline.bundle.js")
.Include("~/Client/app/dist/polyfills.bundle.js")
.Include("~/Client/app/dist/styles.bundle.js")
.Include("~/Client/app/dist/vendor.bundle.js")
.Include("~/Client/app/dist/main.bundle.js")
.IncludeDirectory("~/Client/app/dist/", "*.js.map", false));
bundles.Add(new StyleBundle("~/bundles/angular-components-style").Include(
"~/Client/app/dist/styles.bundle.css")
);
In your layout, you import both the style and script bundle:
#Styles.Render("~/bundles/angular-components-style")
#Scripts.Render("~/bundles/angular-components")
And when you build your angular app, use the no hash option:
ng build --prod --watch -oh none
That way if you build for with or without the --prod option, your output files will not have any hash. When in dev, it will render the styles.bundle.js as a script and when built in prod, it will render it as a link using styles.bundle.css