Can't load angular generated webpage (ng build --prod)

Question

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

Answer 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

// Note: if you don't want to install live-server globally you
// can use npx
npx live-server <path-to-directory>

https://www.npmjs.com/package/live-server

Answer 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.