Javascript 使用angular cli在Chrome上运行本地构建的angular 2应用程序，无需节点服务器

我将使我的角度2问题非常精确

1。我正在使用：

角度2， angular cli:1.0.0-beta.15（网页包构建） 节点：6.4.0， 操作系统：linux x64

2。我想要实现的目标：

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

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

file:///inline.js 未能加载资源：net:：ERR\u文件\u未找到 file:///styles.b52d2076048963e7cbfd.bundle.js 未能加载资源：net:：ERR\u文件\u未找到 file:///main.c45bb457f14bdc0f5b96.bundle.js 未能加载资源：net:：ERR\u文件\u未找到 file:///favicon.ico 未能加载资源：net:：ERR\u文件\u未找到

据我所知，这与路径有关。内置和绑定的应用程序找不到正确的路径。因此，我的问题是在哪里和如何我应该更改我的应用程序或任何构建配置文件中的路径，以使我的应用程序能够正常工作，我希望它能够按照第2点中描述的方式工作

提前感谢您对该主题的直接和完整的回答，因为其他主题没有解释该主题的全部范围

---

您必须使用HTTP服务器为

/dist

文件夹提供服务。您无法回避这个问题，因为出于安全原因，本地加载文件不允许代码执行

服务器不必像Express那样笨重，甚至不像HapiJS那样功能极简。内置的节点http服务器可以正常工作。如果您已经安装了Apache、nginx或IIS，也可以使用它们为您的应用程序提供服务

---

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

您可以使用nw.js（或electron）实现类似的功能。我自己创建了一个应用程序，在nw.js中本地使用angular 2，效果非常好；）

---

io

我建议使用Expressjs，为什么服务器要使用xampp、laragon等。。。路由工作不好，我是这样做的：我用name server创建了一个新文件夹，在里面复制了一个文件index.js，路由是“src/assets/server/index.js”

Index.js内容

var express=require（'express'），
path=require（'path'），
fs=要求（'fs'）；
var-app=express（）；
var staticRoot=uu dirname+'/../../../'；
应用程序集（'端口'，（process.env.port | | 80））；
app.use（express.static（staticRoot））；
应用程序使用（功能（请求、恢复、下一步）{
var accept=req.accepts（'html'，'json'，'xml'）；
如果（接受！=“html”）{
返回next（）；
}
var ext=path.extname（请求路径）；
如果（外部！=''）{
返回next（）；
}
createReadStream（staticRoot+'index.html'）.pipe（res）；
});
app.listen（app.get（'port'），function（）{
console.log（'app在端口上运行'，app.get（'port'））；
});如果使用Angular Cli，则在构建项目后无需修改index.html。
根据github文档
您可以在构建项目时简单地修改参数：

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

实际使用情况如下：

ng build --base-href <base>

ng构建--base href

您可以简单地引入一个特定的url而不是基本url。在本例中，我们使用。（点）作为一个参数
一个简单的解决方案：在构建时更改基本href

ng build --prod --base-href .

现在，您可以双击
index.html
文件，它就可以工作了

以下是此工作的示例：
第一步：

运行命令

ng build

ng build

或

第二步：

index.html中的更改

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

到

第三步：

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

希望它能工作。
没有服务器的解决方案：

第一步：

更改
index.html
：

删除

第二步：

app.module.ts中的更改
：

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

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

第三步：

运行命令

或

双击dist/index.html

查看结果。

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

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

---

从

index.html

中删除

对我来说很有效

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

我认为问题在于使用

文件：//

URL。我敢肯定，出于安全考虑，这会禁用一些JS特性（比如XHR）。使用服务器有什么问题？我不能在服务器上运行它。我需要静态文件，这就是为什么。我不会在PC或MAC上运行应用程序。我只需要使用像Chrome这样的浏览器运行它，不需要任何服务器。非常感谢：）但我需要这个捆绑包在使用webkit但不是Android或iOS而是Tizen的移动设备上工作。里面有webkit，所以我不能直接依赖Google Chrome。但是谢谢你的研究，提赞？这是一些重要的信息，属于你的职位！另外，最好的选择是只实现一个为您的

/dist

服务的NodeJS HTTP服务器。它最多不超过50行，而且CLI已经依赖于它。唯一的答案是+1，这解释了为什么从/dist目录加载index.html不起作用。然而，仍然需要了解更多细节，以了解为什么使用引用的javascript文件生成的静态html是一种安全威胁。当我用ja编写一个简单的html时，为什么会这样

ng build -prod

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