据我了解Angular2概念 - 它将TypeScript文件转换为.js文件。原则上,应该可以从AWS S3存储桶,GitHub或任何静态源编译,打包然后将该Angular2应用程序作为静态应用程序运行。
如果我在节点服务器上运行Angular2应用程序(使用angular-cli“ng serve”命令),服务器上需要500 MB的RAM - 它是“Heey,common!” - 真的应该是这样的!然后,这个框架对React的好处是什么,例如,它只需要一个浏览器。
我似乎无法在将Angular2应用程序作为静态编译的HTML + JS提供任何有用的东西。
也许你可以帮助我理解这一点并解决?
非常感谢!
Maris的
答案 0 :(得分:39)
ng build
或生产构建/捆绑
ng build --prod
它会将您的应用构建/捆绑到可分发的应用中。
完成后,在应用程序根目录中查找dist
文件夹,其中包含您的应用程序需要在节点服务器外部运行的所有内容,例如tomcat实例。
<强>更新强>
感谢@Maris的评论,请确保您的文件路径是相对于当前目录而不是相对于根目录。
只需运行此命令即可更改index.html中的基本href元素。
ng build --prod --base-href ./
答案 1 :(得分:13)
这是导出应用程序的好方法,只需稍加改动即可 打开index.html 并改变
<base href="/">
到
<base href="./">
答案 2 :(得分:6)
这对我有用:
$ ng build --prod --base-href ./
答案 3 :(得分:5)
在现代浏览器中出现错误时,我认为这是不可能的:
Uncaught(承诺):SecurityError:无法在'History'上执行'replaceState':...
很遗憾
答案 4 :(得分:3)
对我有帮助的是
ng build --prod --base-href ./
,并生成dist/
文件在dist/
目录中,编辑index.html
以从type="module"
s中移除nomodule 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 文件。
答案 5 :(得分:1)
How to serve an Angular 2 dist folder index.html投放Angular 2 dist文件夹index.html
如果对每个人都不明显,那对我来说就不是了。如果你想在构建它并修复它的基础ref之后在本地运行dist文件夹,请使用类似http-server的东西并将其指向dist文件夹,而不是任何特定文件。从项目文件夹中的cmd窗口
C:\用户\ myProject的&GT; http-server ./dist
如链接
中所述