问题
I have an Angular application which I serve from Play Framework. To do this, the index.html of Play loaded the Angular js files like follows
<script src="@routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/scripts.js")" type="text/javascript"></script>
I am facing some issues thought
1) When Angular application is build using --prod option then random hash are generated which makes it difficult to load the files
chunk {scripts} scripts.1196131972f9e08fb745.js (scripts) 436 kB [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.de03edbe3c68408ee838.css (styles) 81 kB [initial] [rendered]
chunk {2} polyfills.b8f7e61d338890408fef.js (polyfills) 59.4 kB [initial] [rendered]
chunk {3} main.9fa6e6b934297d0ef934.js (main) 2.01 MB [initial] [rendered]
There is a reason to have these hash strings in the filenames and I would like to keep it this way. But how can I then load files? I can avoid the random hashstrings using --output-hashing none
option but I'll prefer not to (https://github.com/angular/angular-cli/issues/3769).
Question 2)
The no. of bundles generated is also different. It seems --prod doesn't generate styles.js and vendor.js. I found that in package.json, the value of "vendorChunk" is false in production configurations. I don't want to fiddle with it as this is probably what is intented in Angular.
Why are these not generated and what is the workaround of referring these in my index.html (I don't want to keep changing index.html to include files based on production or dev mode)?
Question 3 - The css styles are missing. I read that "In development build global styles are extracted to .js files whereas with production build they are extracted to .css files.". I can use --extract-css false but I don't want to use it if I shouldn't.
In summary, I can make my production code work by running this command "build-prod": "ng build --prod --extract-css false --output-hashing none --output-path ../public/ui",
and by changing "vendorChunk": to true in angular.json, are there any drawback in doing so?
If I don't want to do these changes, how can I make index.html dynamic so that it pics and excludes the right files.
来源:https://stackoverflow.com/questions/62269386/problems-in-moving-from-development-mode-to-production-mode