如何让 angular-cli 实时重新加载与我的 Web 服务器一起使用答案

【问题标题】：How to get angular-cli live reload working with my web server如何让 angular-cli 实时重新加载与我的 Web 服务器一起使用
【发布时间】：2016-10-03 19:06:21
【问题描述】：

我需要弄清楚如何使用我的本地 Web 服务器进行实时重新加载。我正在使用 vagrant 在http://admin.myproject.local 托管我的项目，并使用 angular-cli 构建我的应用程序。

使用npm start 时，我可以在http://localhost:4200 上实时查看我的更改，但在进行构建之前，我的 admin.myproject.local 上没有任何更改。我查看了 angular-cli 文档并认为代理将是解决方案。我创建了一个proxy.conf.json 文件并添加了以下代码：

{
  "/admin": {
    "target": "http://admin.myproject.local",
    "secure": "false"
  }
}

但是这似乎没有帮助。如果我尝试http://localhost:4200/admin，我会得到 404。

当通过我的 .local url 访问该站点时，有人可以指出正确的方向以使实时重新加载工作吗？

【问题讨论】：

标签： angular vagrant angular-cli

【解决方案1】：

您可以创建另一个 HTML 文件（或使用您现有的服务器索引文件）并将您的脚本标签指向生成的 js 文件。比如……

<!doctype html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <base href="/"> 
</head>
<body>
    <my-app></my-app>
    <script src="http://localhost:4200/inline.js"></script>
    <script src="http://localhost:4200/scripts.bundle.js"></script>
    <script src="http://localhost:4200/main.bundle.js"></script>
</body>
</html>

这适用于开发。对于生产环境，在运行 ng build -prod 后包含 dist 目录中的脚本文件。

【讨论】：