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

BartB picture BartB · Sep 29, 2016 · Viewed 30.6k times · Source

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

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

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

sabuz picture sabuz · Apr 14, 2017

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.