问题
After deploying my angular app by using 'ng build --prod' I tried to open index.html file and check my webapp. But it display nothing in chrome, firefox and edge web browsers. After I open console and checked whether is there are any errors, it will show me 6 error messages.
I should mention that my app successfully compiled and worked on 'http://localhost:4200/' . After I tried another angular app(new one), but it comes withe same kind of errors after build.
Errors:
1) Access to script at 'file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
2) GET file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/runtime-es2015.edb2fcf2778e7bf1d426.js net::ERR_FAILED
3) Access to script at 'file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/polyfills-es2015.2987770fde9daa1d8a2e.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. index.html:36
4) GET file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/polyfills-es2015.2987770fde9daa1d8a2e.js net::ERR_FAILED index.html:1
5) Access to script at 'file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. index.html:36
6) GET file:///D:/AngularTshirt/module01/moduleapp01/dist/moduleapp01/main-es2015.69da1b25d5a7a648b825.js net::ERR_FAILED
回答1:
The problem is you're trying to run the application without a server serving the js bundles generated by Angular. Angular will load the js asynchronously.
An option run live-server on the compiled directory
// Install live-server if you haven't
npm install -g live-server
// Run live-server on you dist
cd <project-compile-dist-path>
live-server
https://www.npmjs.com/package/live-server
回答2:
You have to serve your project's dist/moduleapp01 folder from a HTTP server. The browser automatically blocks some requests when they are made from your file system due to security reasons (what you tried to do). You can use http-server (https://www.npmjs.com/package/http-server).
From your project's root you can start the server with http-server ./dist/moduleapp01 -p 4200 and open it in the browser at http://localhost:4200.
来源：https://stackoverflow.com/questions/58878123/cant-load-angular-generated-webpage-ng-build-prod