在没有服务器的情况下，在浏览器中作为静态应用运行Angular2

Question

根据我对Angular2概念的理解——它将TypeScript文件转换为。js文件。原则上，应该可以编译、打包，然后从AWS S3桶、GitHub或任何静态源将Angular2应用程序作为静态应用程序运行。

如果我在节点服务器上运行Angular2应用程序(使用angular-cli "ng serve"命令)，它会在服务器上占用500 MB的内存——这是"嘿，常见的!"-真的应该是那样吗?例如，相对于只需要浏览器的React，这个框架有什么好处呢?

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

也许你能帮我理解这个，并解决?

非常感谢!

马里斯

Answer 1

运行BUILD命令到BUNDLE/BUILD

ng构建

或用于生产构建/包

ng build——prod

它会把你的应用构建/捆绑成一个可分发的应用。

当它完成后，在你的应用程序根目录中寻找一个dist文件夹，它将包含你的应用程序需要在节点服务器之外运行的所有内容，比如tomcat实例。

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

只需运行这个命令来改变index.html中的base href元素。

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

Answer 2

这是导出应用程序的好方法，只需要做一点更改打开index . html并更改

<base href="/">

<base href="./">

Answer 3

这个适合我:

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

Answer 4

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

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

很遗憾

Answer 5

帮助我的是，

1. 在app route目录下运行ng build --prod --base-href ./，生成dist/文件

2. 在dist/目录中，编辑index.html使type="module"和nomodule defer属性从script s中远程化。

   ,

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

如何为Angular 2的dist文件夹index.html提供服务

如果对每个人来说都不是显而易见的，对我来说也不是。如果您想在构建并修复它的base ref之后在本地运行dist文件夹，请使用http-server之类的东西并将其指向dist文件夹，而不是指向任何特定的文件。从项目文件夹

的cmd窗口

c:usermyProject> http-server ./dist

链接