Running an angular 2 application built locally on Chrome using angular-cli without a node server

Question

I will make my Angular 2 question very precise.

1. I am using:

Angular 2, angular-cli: 1.0.0-beta.15, ( webpack building ) node: 6.4.0, os: linux x64

2. What I want to achieve:

I want to build my project in a way that after the build ( ng build project-name ) I get static files of my Angular 2 application, which I can run directly from chrome without using ng serve or the node server. I just want to double click index.html and run the app locally.

3. Meanwhile, what I get in the chrome browser console output when I double click the generated index.html is:

file:///inline.js Failed to load resource: net::ERR_FILE_NOT_FOUND file:///styles.b52d2076048963e7cbfd.bundle.js Failed to load resource: net::ERR_FILE_NOT_FOUND file:///main.c45bb457f14bdc0f5b96.bundle.js Failed to load resource: net::ERR_FILE_NOT_FOUND file:///favicon.ico Failed to load resource: net::ERR_FILE_NOT_FOUND

4. As I understand this is related to paths. The built and bundled application cannot find the right paths. So my question is where and how I should change the paths in my app or in any build configuration files in order for my app to work like I would like it to work in the way I have described in point number 2

5. Thank you in advance for a direct and full answer on that topic, because other topics are not explaining the full scope on that subject.

Answer 1

First Step:

Run the command

ng build 

or

ng build -prod (then it will compact all files for production version) 

Second Step:

Change in index.html

<base href="/"> to <base href="./"> 

Third Step:

Put all files into server(may be htdocs in localhost or any server)

Hopefully it will work.

Answer 2

Solution without 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.