在没有服务器

时间:2016-10-13 14:42:32

标签: angular angular-cli

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

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

我似乎无法在将Angular2应用程序作为静态编译的HTML + JS提供任何有用的东西。

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

非常感谢!

Maris的

6 个答案:

答案 0 :(得分:39)

运行BUILD命令到BUNDLE / build

  

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)

对我有帮助的是

  1. 在应用程序路由目录中运行ng build --prod --base-href ./,并生成dist/文件
  2. dist/目录中,编辑index.html以从type="module" s中移除nomodule deferscript属性。

    例如:

    <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

如链接

中所述