3

I have a index.html file and another topBar.html file and I want to include that file in my index.html.

My directory structure is like below:

mainfolder/
    scripts/
    views/
        topBar.html
    index.html

Here is the code that I tried

 <div ng-controller="mainCtrl">
   <div ng-include="'views/topBar.html'"></div>
 </div>

But nothing is being displayed and it gives me error in the console

angular.js:12701 Failed to load file:'path' Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

DragonBorn
  • 1,809
  • 5
  • 20
  • 44
  • The error message says it all. Don't try to run your angular **web** application from the file system. Run it by serving the files from a **web** server, over http. – JB Nizet Oct 27 '17 at 06:38
  • 2
    Possible duplicate of ["Cross origin requests are only supported for HTTP." error when loading a local file](https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local) – Satpal Oct 27 '17 at 06:40

1 Answers1

3

If you have written your code in yur code editior and testing your page in your browser without using any server then this error comes. You can test plain html css in browser that will work fine , but when you craete something more than just html , css then that gives error . A server has to be used for that .many web browsers are programed to watch for cross site attacks, and will block requests. You don't want anyone being able to read your hard drive from your web browser.

Solution :

Install a local server and then run your application on server.

vertika
  • 1,284
  • 1
  • 8
  • 22