3

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.

6 errors in my webapp

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

3
  • there is no problem. If you are using the VS Code the use live server
    – nitishk72
    Nov 15, 2019 at 13:38
  • read more about CORS to get better understanding about the policy
    – nitishk72
    Nov 15, 2019 at 13:38
  • You need to serve the app. Which is exactly what the built-in server does on localhost:4200. Opening the HTML file alone won't work. Nov 15, 2019 at 14:02

2 Answers 2

8

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

0
1

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.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.