使用angular-cli在没有节点服务器的情况下运行本地构建在Chrome上的角度2应用程序

Question

我会非常准确地提出 Angular 2 问题。

1。我正在使用：

Angular 2，    angular-cli：1.0.0-beta.15，（webpack building）    节点：6.4.0，    os：linux x64

2。我想要实现的目标：

我想以构建（ng build project-name）之后的方式构建我的项目我得到了我的Angular 2应用程序的静态文件，我可以直接从chrome运行而不使用< strong> ng serve 或节点服务器。 我只想双击index.html并在本地运行该应用。

第3。同时，当我双击生成的index.html时，我在chrome浏览器控制台输出中获得的是：

  

file：///inline.js无法加载资源：net :: ERR_FILE_NOT_FOUND       file：///styles.b52d2076048963e7cbfd.bundle.js无法加载资源：net :: ERR_FILE_NOT_FOUND       file：///main.c45bb457f14bdc0f5b96.bundle.js无法加载资源：net :: ERR_FILE_NOT_FOUND       file：///favicon.ico无法加载资源：net :: ERR_FILE_NOT_FOUND

1. 据我所知，这与路径有关。构建和捆绑的应用程序找不到正确的路径。所以我的问题是哪里和 我应该在我的应用或任何构建配置文件中更改路径我的应用程序的工作顺序就像我希望它以我在第2点

中描述的方式工作

2. 提前感谢您对该主题的直接和完整答案，因为其他主题并未解释该主题的全部范围。

Answer 1

第一步：

运行命令

ng build

或

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

第二步：

index.html中的更改

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

第三步：

将所有文件放入服务器（可能是localhost中的htdoc或任何服务器）

希望它会奏效。

Answer 2

无服务器的解决方案：

第一步：

index.html改变：

删除<base href="/">

第二步：

app.module.ts改变：

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

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

第三步：

运行命令

ng build

或

ng build -prod

双击dist/index.html查看结果。

Answer 3

如果您正在使用Angular-Cli，则在构建项目后无需修改index.html。 根据Angular-CLi github文档https://github.com/angular/angular-cli#base-tag-handling-in-indexhtml  您可以在构建项目时简单地修改参数：

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

实际用法是：

ng build --base-href <base>

您可以简单地引入特定网址而不是基础网址。在这个例子中我们使用。 （点）作为参数

Answer 4

一个简单的解决方案：在构建时更改基础href。

ng build --prod --base-href .

现在，您可以双击index.html文件，它将起作用。

以下是此工作的一个示例：https://mattspaulding.github.io/angular-material-starter/

Answer 5

您必须使用HTTP服务器提供/dist文件夹。你无法解决这个问题，因为出于安全原因，在本地加载文件不允许代码执行。

服务器不一定像Express那样重，甚至像HapiJS这样的极具特色的极简主义服务器。内置的Node http服务器就可以了。如果您已经设置了Apache，nginx或IIS，您也可以使用它们来为您的应用程序提供服务。

编辑：我做了一些道德搜索并决定提供一个我个人不会使用的解决方案，但可能非常适合你：Web Server for Chrome Extension

Answer 6

您只需使用以下一行代码构建应用程序：

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

Answer 7

我建议使用Expressjs，为什么服务器如何xampp，laragon等...路由不能正常工作，我这样做：我创建了带有名称服务器的新文件夹，里面复制了一个文件 index.js < / strong>，路由为“src / assets / server / index.js”，

Index.js内容

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'));
});

在package.json中，在项目的根目录

中

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

稍后，在控制台命令 ng build prod 中运行并运行

  

node dist / assets / server /

此命令执行快速服务器，指示文件配置我们服务器的方向，此时，文件 index.js预先配置

p.s：抱歉我的英语不好，我正在学习

Answer 8

从<base href="/">中删除index.html对我来说很有效。

Answer 9

你可以使用例如nw.js（或电子）来实现这样的目标。我自己创建了一个应用程序，它使用nw.js本地角度2，它就像一个魅力;）

nwjs.io

Answer 10

使用ng serve --open来构建应用程序并启动Web服务器