angular-cli - 直接从 dist 运行 index.html？答案

【问题标题】：angular-cli - run index.html directly from dist?angular-cli - 直接从 dist 运行 index.html？
【发布时间】：2016-09-19 12:12:15
【问题描述】：

不确定这是否可行。创建新的 angular-cli 项目，运行 ng serve 并打开浏览器。它奏效了。

运行ng build --prod，创建带有 index.html 和 js 包数量的 dist 文件夹。

然后我在浏览器中打开了 index.html。挂起等待javascript（所以我只看到“正在加载......”）。

这应该有效吗？如果没有，有人可以解释原因吗？

【问题讨论】：

您是刚刚打开文件还是启动了 http 服务器？
刚刚打开的文件。但我已经在 nginx（索引文件加上 js 包）下运行它并得到完全相同的结果。只是坐在那里显示加载....

标签： angular-cli

【解决方案1】：

您不应该只打开这个文件。 Web 服务器是您生产使用所需要的。

如果您想使用内置服务器提供构建版本的应用程序，您可以使用ng serve --prod 命令。

【讨论】：

谢谢阿瑞克。你能解释一下为什么只在本地运行 html 和本地捆绑的 javascript 是行不通的，因为我在开发某些东西之前肯定用 javascript 运行过 html，所以想知道这里有什么不同。我确实注意到，如果我浏览器开发工具，脚本是未定义的。再说一遍，你知道为什么吗？
不同之处在于 SystemJS（angular-cli 中的模块加载器）发出 XHR 请求以加载任何 js 文件（即使它是一个包）。由于安全原因，这是有问题的。
@Arek Żelechowski 嗨，我需要打开我的 index-dev.html 而不是 index.html，你知道如何配置 angular-cli 来做到这一点吗？
我不知道这是否可能。您应该提出单独的问题。

【解决方案2】：

在使用 ng build 构建 Angular 之后，我们从当前目录使用 http-server ./dist。 http-server 是模块运行服务器 nodeJS。

参考：https://www.npmjs.com/package/http-server

ng build <br>
http-server ./dist

【讨论】：

【解决方案3】：

http/web服务器是一个实现http协议的软件，它的主要目标是提供静态html页面。

当您执行ng serve -o 时，它启动服务器的唯一目的是当应用程序访问本地主机（例如http://localhost:4200/）时提供文件 main.js、polyfills.js、runtime.js 和其他文件，例如 favicon.ico 或样式表，在该浏览器足够聪明之后，读取这些文件并渲染应用程序

现在，当您运行 ng build --prod=true 时，它会创建包含所有必需依赖项的 dist 文件夹

如果您打开index.html，它不会像常规 HTML 页面（静态 Web 应用程序）那样向您显示内容，因为生成的 index.html 具有 src 考虑到服务器提供的所有依赖项

<body>
  <app-root></app-root>
  <script type="text/javascript" src="runtime.ec2944dd8b20ec099bf3.js"></script>
  <script type="text/javascript" src="polyfills.e6fbd82b34ccb0c8609f.js"></script>
  <script type="text/javascript" src="main.de97b389e57e8b1c5843.js"></script>
</body>

以下信息仅用于理解目的，绝对不是建议在生产中进行此更改

如果你想启动应用程序只需点击 index.html 就像出现静态网页一样，你需要更新这些路径

例如。使用

创建基本项目

ng new my-app

ng 构建 --prod=true

dist 位置：D:\angular\dist\my-app 所以index.html 将在 D:\angular\dist\my-app\index.html 中。更新 index.html 如下

<body>
<app-root></app-root>
<script type="text/javascript" src="angular/dist/my-app/runtime.ec2944dd8b20ec099bf3.js"></script>
<script type="text/javascript" src="angular/dist/my-app/polyfills.e6fbd82b34ccb0c8609f.js"></script>
<script type="text/javascript" src="angular/dist/my-app/main.de97b389e57e8b1c5843.js"></script>

然后重新加载你的网页。

【讨论】：