angular-cli

Question

不确定这是否可行。创建了新的 angular-cli 项目，运行 ng 服务并打开了浏览器。成功了。

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

然后我在浏览器中打开 index.html。挂起等待 javascript（所以我只看到 "loading ..."）。

这应该行得通吗？如果没有，有人可以解释为什么吗？

Answer 1

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

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

Answer 2

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

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

ng build <br>
http-server ./dist

Answer 3

http/web server is a software that implements http protocol and its primary goal is provide static html page.

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

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

如果你打开 index.html 它不会像常规 HTML 页面（静态网络应用程序）那样显示你的内容，因为生成的 index.html 有 src 考虑到服务器 [= 服务的所有依赖项21=]

<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>

Below information is just for understanding purpose its strictly not recommended to do this changes in production

如果您想像打开静态网页那样点击 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>

然后重新加载您的网页。

angular-cli - 运行 index.html 直接来自 dist？

angular-cli - run index.html directly from dist?