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

Question

据我所知,Angular2概念 - 它将TypeScript文件转换为.js文件.原则上,应该可以从AWS S3存储桶,GitHub或任何静态源编译,打包然后将该Angular2应用程序作为静态应用程序运行.

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

我似乎无法找到任何有用的Angular2应用程序作为静态编译HTML + JS.

也许你可以帮助我理解这一点,并解决？

非常感谢!

马里斯

Answer 1

运行BUILD命令到BUNDLE/build

建立

或者用于生产构建/捆绑

ng build --prod

它会将您的应用程序构建/捆绑到可分发的应用程序中.

完成后,在应用程序根目录中查找一个dist文件夹,它将包含您的应用程序需要在节点服务器外部运行的所有内容,例如tomcat实例.

更新

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

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

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

Answer 2

这是导出应用程序的好方法,只需要稍微更改一下打开index.html并进行更改

<base href="/">

至

<base href="./">

Answer 3

对我有帮助的是，

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

2. 在dist/目录中，编辑index.html来远程 stype="module"和snomodule defer的属性script。

   前任：

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

Answer 4

这对我有用:

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

Answer 5

在现代浏览器中出现错误时,我认为这是不可能的:

未捕获(承诺):SecurityError:无法在'History'上执行'replaceState':...

真遗憾