在没有服务器的浏览器中以静态应用程序的形式运行Angular2

据我所知，Angular2的概念是将TypeScript文件转换为.js文件。原则上，应该可以从AWS S3 bucket、GitHub或任何静态源以静态应用程序的形式编译、打包并运行Angular2应用程序

如果我在节点服务器上运行Angular2应用程序（使用AngularCLI“ng serve”命令），服务器上需要500 MB的RAM—这是“嘿，普通！”—真的应该这样吗！例如，与React相比，这个框架有什么好处？React只需要一个浏览器

在将Angular2应用程序作为静态编译的HTML+JS提供方面，我似乎找不到任何有用的东西

也许你能帮我理解，解决这个问题

非常感谢

Maris

运行命令以绑定/build

ng构建

或用于生产构建/捆绑

ng构建——prod

它将把你的应用程序构建/捆绑成一个可分发的应用程序

完成后，在应用程序根目录中查找

dist

文件夹，该文件夹将包含应用程序在节点服务器之外运行所需的所有内容，例如tomcat实例

更新

感谢@Maris的评论，请确保您的文件路径相对于当前目录，而不是相对于根目录

只需运行此命令即可更改index.html中的base href元素

ng build--prod--base href/

---

这是导出应用程序的好方法，只需稍作更改 openindex.html 改变

<base href="/">

到

这对我很有用：

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

提供角度为2 dist的文件夹index.html

如果不是每个人都清楚，我也不清楚。如果您想在构建dist文件夹并将其修复为base ref之后在本地运行它，请使用类似于http server的方法将其指向dist文件夹，而不是任何特定的文件。从项目文件夹中的cmd窗口

c:\user\myProject>http服务器。/dist

---

正如链接中所解释的，我认为在现代浏览器中不可能出现错误：

未捕获（承诺中）：SecurityError:未能对“历史记录”执行“replaceState”：

很遗憾帮助我的是

在应用程序路由目录中运行

ng build--prod--base href./

，并生成

dist/

文件

在

dist/

目录中，编辑

index.html

以从

脚本中远程
type=“module”
和
nomodule defer
属性

Ex:

<script src="runtime-es2015.1eba213af0b233498d9d.js" type="module"></script>
<script src="runtime-es5.1eba213af0b233498d9d.js" nomodule defer></script>



应改为,

<script src="runtime-es2015.1eba213af0b233498d9d.js"></script>
<script src="runtime-es5.1eba213af0b233498d9d.js"></script>

---

现在，您应该能够在浏览器中呈现index.html文件。

有一个绑定js文件的工具。除此之外，我建议使用，因为所有内容都会自动绑定并发布到

build

文件夹中。React和Angular 2/4编译为静态代码。大多数情况下，开发构建是使用某种构建工具（如webpack）提供的，但最终，您的前端应用程序可以从静态位置（如S3存储桶）提供。是的，非常感谢-这是正确且最简单的解决方案@玛丽：当然！很高兴帮忙！我之前尝试过这个，但在我的机器上打开dist/index.html文件时，它只是显示“正在加载…”，并没有真正加载-所以我认为它仍然需要一个服务器。但现在在您回答之后，我检查了JavaScript控制台，发现它找不到.js文件，因为它们位于绝对路径“/…”中，而不是相对于当前目录。但一旦这些文件被找到，所有的工作就像一个符咒@玛丽：哦，很好！我很高兴你解决了你的问题，只是需要一点动力，干得好！我总是很难让它工作，这个答案解决了问题！这一点很好，但最好是在发出命令时给出，而不是像下面的答案那样手动。根据Angular文档（以及WebPack的文档），您不应该更改自动生成的文件。只要使用标志

--base href你就是上帝。是否有任何方法可以构建并让它不这样做，这样我就不必修改dist文件？也需要这样做这可能是CORS的问题，使用iframes？
<script src="runtime-es2015.1eba213af0b233498d9d.js"></script>
<script src="runtime-es5.1eba213af0b233498d9d.js"></script>