Question

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

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

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

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

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

Demo

Answer 3

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

执行ng serve -o时，它使服务器启动的唯一目的是当应用程序访问localhost（例如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 build --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 - 直接从dist？

3 个答案: