运行 Angular2 作为没有服务器的浏览器中的静态应用程序

Question

据我了解 Angular2 概念 - 它正在将 TypeScript 文件转换为 .js 文件。原则上，应该可以编译、打包然后运行 Angular2 应用程序作为来自 AWS S3 存储桶的静态应用程序，GitHub 或任何静态源。

如果我运行节点服务器上的 Angular2 应用程序（使用 angular-cli "ng serve" 命令），它在服务器上占用 500 MB RAM - 它是 "Heey, common!" -真的应该这样吗！这个框架相对于只需要一个浏览器的 React 有什么好处。

我似乎找不到任何关于将 Angular2 应用程序作为静态编译的 HTML+JS 提供服务的有用信息。

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

非常感谢！

马里斯

Answer 1

运行 BUILD 命令到 BUNDLE/build

ng build

或制作 build/bundle

ng build --prod

它将build/bundle您的应用程序变成可分发的应用程序。

完成后，在您的应用程序根目录中查找 dist 文件夹，其中将包含您的应用程序在节点服务器外部运行所需的所有内容，比如 [=36] =]实例.

更新

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

只需运行这个命令来更改 index.html 中的基本 href 元素。

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

Answer 2

这是导出应用程序的好方法，只需稍作改动打开 index.html 并更改

<base href="/">

至

<base href="./">

Answer 3

这对我有用：

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

Answer 4

How to serve an Angular 2 dist folder index.html 服务于 Angular 2 dist 文件夹 index.html

如果不是每个人都看得出来，对我来说也不是。如果你想在本地运行构建 dist 文件夹并修复它的基础引用，使用类似 http-server 的东西并将它指向 dist 文件夹，而不是任何特定文件。从项目文件夹

中的 cmd window

c:\user\myProject> http-server ./dist

如 link

中所述

Answer 5

我认为在现代浏览器中不可能出错:

Uncaught (in promise): SecurityError: Failed to execute 'replaceState' on 'History':...

可惜了

Answer 6

对我有帮助的是，

运行应用程序路径目录中的 ng build --prod --base-href ./ 并生成 dist/ 文件

在 dist/ 目录中，编辑 index.html 以从 script 中远程控制 type="module" 和 nomodule defer 属性。

例如：

<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 文件了。

运行 Angular2 作为没有服务器的浏览器中的静态应用程序

Run Angular2 as static app in browser without a server

angular-cli

angular