使用angular-cli在Chrome上运行一个本地构建的angular 2应用，不需要节点服务器

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

本文关键字：angular 构建 应用 服务器 节点 不需要 一个 Chrome angular-cli 运行 使用      更新时间：2023-09-26

我会让我的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失败文件:///b52d2076048963e7cbfd.bundle.js加载资源:net::ERR_FILE_NOT_FOUND失败文件:///main.c45bb457f14bdc0f5b96.bundle.js加载资源:net::ERR_FILE_NOT_FOUND失败文件:///favicon.ico加载资源失败:net::ERR_FILE_NOT_FOUND

  • 据我所知，这与路径有关。构建和捆绑的应用程序无法找到正确的路径。所以我的问题是哪里和如何我应该改变路径在我的应用程序或任何构建配置文件为了让我的应用程序工作，就像我希望它以我在点2

    • 中描述的方式工作

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

    •

    第一步:

    运行命令

    ng build

    或

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

    第二步:

    修改index.html

    <base href="/"> to <base href="./">
    第三步:

    将所有文件放入服务器(可能是本地主机或任何服务器的htdocs)

    不带服务器的解决方案:

    :

    index.html的变化:

    remove <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查看结果

    如果你使用的是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。在这个例子中，我们使用。(点)作为参数

    一个简单的解决方案:在构建时更改base href 

    ng build --prod --base-href .
    现在你可以双击index.html文件，它将工作。

    下面是一个工作的例子:https://mattspaulding.github.io/angular-material-starter/

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

    服务器不需要像Express那样笨重，甚至不需要像HapiJS那样功能强大的极简主义服务器。内置的Node http-server就可以了。如果你已经安装了Apache、nginx或IIS，你也可以使用它们来服务你的应用。

    编辑:我做了一些道德搜索，并决定提供一个解决方案，我个人不会使用，但可能是一个很适合你:Web服务器Chrome扩展

    你所需要的就是用这一行代码来构建你的应用程序:

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

    我推荐使用Expressjs, why servers how xampp, laragon等…我创建了一个名为server的新文件夹，在里面复制了一个文件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'));
});

    在包中。Json，在项目的根目录

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

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

    节点dist/资产/服务器/

    这个命令执行一个express server，指示文件配置的方向我们的服务器，在这种情况下，文件index.js预配置

    p。对不起，我的英语不好，我正在学习

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

    您可以使用nw.js(或electron)来实现类似的功能。我自己创建了一个应用程序，在本地使用angular 2和nw.js，它像魅力一样工作;)

    nwjs.io

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

    相关文章：