How do I build my angular 8 app so that it works when opening index.html in browser?

Question

I just finished working on an angular 8 app and I am trying to host it on github pages. My problem is that when I try to build the app via ng build --prod and open the index.html of the dist folder in my browser. It just reads the content of that file and throws a bunch of :

Failed to load resource: net::ERR_FAILED

Access to script at 'file:///D:/weather/Wapp/dist/Wapp/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.

I tried changing the href in the html manually and via commands and attempted multiple answers of this question but nothing worked.I also want to mention that the built website works fine in a localserver with server-lite.

this is the structure of the dist folder :

D:.
└───Wapp
    │   3rdpartylicenses.txt
    │   favicon.ico
    │   index.html
    │   main-es2015.3597f5e65f4450662a55.js
    │   main-es5.3597f5e65f4450662a55.js
    │   polyfills-es2015.2987770fde9daa1d8a2e.js
    │   polyfills-es5.6696c533341b95a3d617.js
    │   runtime-es2015.edb2fcf2778e7bf1d426.js
    │   runtime-es5.edb2fcf2778e7bf1d426.js
    │   styles.44d5eaa2a1e46e8873ec.css
    │
    └───assets
            rain.svg
            wi-sandstorm.svg

any help will be welcome, thank you.

that's because you are accessing a file via `file://` protocol. You'd better simply run you angular app using `ng serve`. — Nicolas, Nov 22 '19 at 18:01

score 0 · Answer 1 · edited Jan 05 '22 at 04:48

Basically Angular 2+ is not designed to work off of the file system without a web server. If you really need to serve an angular 2+ app from the file system I would consider electron as a better solution. Otherwise, you can use lite-server a very lightweight development web server.

OR the normal way

ng serve

Note : However, there is a small hack which will work for most case (not recommended):

Solution without a server:

First Step:

Change in index.html:

remove <base href="/">

Second Step:

Change in app.module.ts:

import { CommonModule, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from '@angular/common';

@NgModule({
   providers: [
       { provide: APP_BASE_HREF, useValue: '/' },
       { provide: LocationStrategy, useClass: HashLocationStrategy }
   ]
})

Third Step:

Run the command

ng build

or

ng build -prod

Doubleclick dist/index.html to see the result.

How do I build my angular 8 app so that it works when opening index.html in browser?

1 Answers1