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.

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

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

Solution 3

If you're using Angular-Cli you don't need to amend index.html after building the project. As per Angular-CLi github document https://github.com/angular/angular-cli#base-tag-handling-in-indexhtml you can simply modify argument while you're building the project:

    Example: ng build --prod --base-href .

The actual Usage is:

ng build --base-href <base>

you can simply introduce a specific url instead of base. In this example we use . (dot) as an argument

Solution 4

A simple solution: Change your base href when you build.

ng build --prod --base-href .

Now you can double click the index.html file and it will work.

Here is an example of this working: https://mattspaulding.github.io/angular-material-starter/

Solution 5

You must serve the /dist folder using an HTTP server. You can't get around this because loading files locally doesn't allow code execution for security reasons.

The server doesn't have to be something heavy like Express or even a highly featured minimalist one like HapiJS. The built in Node http-server will do just fine. If you've already got Apache, nginx, or IIS set up you can also use them to serve your app.

EDIT: I did some moral searching and decided to offer up a solution I personally wouldn't use, but may be a good fit for you: Web Server for Chrome Extension

View more solutions