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

Posted 2023-02-19

【中文标题】使用 angular-cli 运行在 Chrome 上本地构建的 Angular 2 应用程序，无需节点服务器

【英文标题】：Running an angular 2 application built locally on Chrome using angular-cli without a node server

【发布时间】：2017-02-07 20:20:44

【问题描述】：

我会让我的 Angular 2 问题非常精确。

1.我正在使用：

角度 2， angular-cli：1.0.0-beta.15，（webpack 构建） 节点：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_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

据我了解，这与路径有关。构建和捆绑的应用程序找不到正确的路径。所以我的问题是在哪里和如何我应该在我的应用程序或任何构建配置文件中更改路径为了让我的应用按照我在第 2 点

中描述的方式工作

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

【问题讨论】：

我认为问题在于使用file:// URL。由于安全问题，我很确定这会禁用一些 JS 功能（如 XHR）。使用服务器有什么问题？

我无法在服务器上运行它。我需要静态文件，这就是原因。我不会在 PC 或 MAC 上运行该应用程序。我只需要使用像 Chrome 这样的浏览器来运行它，而不需要任何服务器。

【参考方案1】：

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

【参考方案2】：

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

ng build --prod --base-href .

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

这是一个工作示例：https://mattspaulding.github.io/angular-material-starter/

【讨论】：

未知选项：'--bh'

ng build --base-href ./

【参考方案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>

您可以简单地引入一个特定的 url 而不是 base。在这个例子中，我们使用 . （点）作为参数

【讨论】：

一旦我手动设置了基本集，我就可以工作，但是从命令行无法正常工作，不知道为什么，你测试过吗？

未知选项：'--bh'

ng build --base-href ./

【参考方案4】：

从index.html 中删除<base href="/"> 对我有用。

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review

@Jean-FrançoisFabre 这实际上为我解决了问题

【参考方案5】：

您只需要使用这行代码来构建您的应用程序：

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

【参考方案6】：

无服务器解决方案：

第一步：

更改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查看结果。

【讨论】：

这是唯一对我有用的。如果基本标记留在 index.html 中（即使它设置为 ./ 或 . 或其他）导致页面尝试推送状态，文件不支持///

这对我有用，谢谢！ @Bartb，你介意接受这个作为答案吗？

它确实有效，但问题是。应用程序在：'file:///C:/Users/000000/Desktop/assignment1/index.html#/login' 处运行，但在以下位置查找 json 文件：'file:///C:/Users/assets/json/ userStory.json' 应该是 'file:///C:/Users/000000/Desktop/assignment1/assets/json/userStory.json' 。请帮忙。

这对我有用。但是，我使用从资产文件夹加载的字体文件在我的应用程序中创建了一个字体系列。它可以与 ng serve 命令正常工作，但不能以这种方式工作。为什么？

【参考方案7】：

第一步：

运行命令

ng build

或

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

第二步：

index.html 的变化

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

第三步：

将所有文件放入服务器（可以是本地主机或任​​何服务器中的htdocs）

希望它会起作用。

【讨论】：

第二步会变魔术。但为什么？为什么点需要手动添加

@Khaleel 因为要确保您的文件路径是相对于当前目录而不是相对于根目录，我们必须添加 .

@Khaleel 您可以将点添加到您的主 index.html 文件中，它将延续到生产版本，因此您不必每次都手动添加。

【参考方案8】：

我建议使用 Expressjs，为什么服务器如何 xampp、laragon 等...路由不能正常工作，我是这样做的：我用名称服务器创建了新文件夹，里面复制了一个文件 index.js，路由将是“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 并运行

节点分布/资产/服务器/

这个命令执行一个express server，表示配置我们服务器的文件的方向，此时文件index.js preconfigured

ps：对不起，我的英语不好，我正在学习

【参考方案9】：

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

服务器不必像 Express 那样笨重，甚至不必像 HapiJS 这样功能强大的极简服务器。内置的 Node http-server 就可以了。如果您已经安装了 Apache、nginx 或 IIS，您也可以使用它们来为您的应用程序提供服务。

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

【讨论】：

非常感谢 :) 但我需要这个包在使用 webkit 但不是 android 或 ios 而是 Tizen 的移动设备上工作。里面有webkit，所以我不能直接依赖谷歌浏览器。但感谢您的研究。

Tizen？这是您帖子中的一些重要信息！

另外，你最好的选择是实现一个 NodeJS HTTP 服务器来为你的/dist 提供服务。它最多不到 50 行，并且 CLI 已经依赖它。

+1 是唯一的答案，它解释了为什么从 /dist 目录加载 index.html 不起作用。但是，仍然要找到更多关于为什么 Angular 生成带有引用的 javascript 文件的静态 html 是安全威胁的详细信息。以及为什么当我只在同一个文件夹中编写一个带有 javascript 文件的简单 html 时，它会起作用。

威胁是跨站点脚本，而事情不工作的原因是跨域请求共享的一部分。您的请求必须来自同一地点和/或必须正确响应所有飞行前检查。当您没有服务器来响应您的 OPTIONS 飞行前的响应时，浏览器会进入“NOPE”并拒绝响应，因为它们与允许的标头、方法或 CORS 难题的其他一点点不匹配。

【参考方案10】：

例如，您可以使用 nw.js（或电子）实现类似的目标。我自己创建了一个应用程序，它在本地使用 angular 2 和 nw.js，它就像一个魅力;)

nwjs.io

【讨论】：

没有，至少目前没有。但你没有提到你需要移动支持。

不过我会尝试在 Tizen 上运行它。就像在 webkit 上运行一样。如果它在 webkit 上运行并且确实需要任何服务器，那么它必须在 Tizen 上运行。谢谢你的回答:)。