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

问题

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

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

回答1:

First Step:

Run the command

ng build

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.

回答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

ng build -prod

Doubleclick dist/index.html to see the result.

回答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

回答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/

回答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

回答6:

All you need is to build your app using this one line of code:

ng build --prod --base-href ./

回答7:

I recommend use Expressjs, why servers how xampp, laragon, etc... the routes not work well, I did it like that: I created new folder with name server, inside copied an file index.js, the route would be "src/assets/server/index.js" ,

Index.js content

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/../../';

app.set('port', (process.env.PORT || 80));

app.use(express.static(staticRoot));

app.use(function(req, res, next){
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }
    fs.createReadStream(staticRoot + 'index.html').pipe(res);

});
app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

In package.json, inside the root of project

{
    "dependencies": {
        "express": "4.13.4"
    }
}

later, run in console command ng build prod and run

node dist/assets/server/

this command execute an express server, indicating the direction of file config our server, on this occasion, the file index.js preconfigured

p.s: sorry for my bad english, I am learning

回答8:

Removing <base href="/"> from index.html worked for me.

回答9:

You can achieve something like this using nw.js for example (or electron). I created an app myself that uses angular 2 locally with nw.js and it works like a charm ;)

nwjs.io