发布angular4 app

时间:2017-09-27 15:48:57

标签: angular

我是Angular 4中的新手,所以我想尝试一下框架。我安装了angular-cli并使用命令ng new MyProject创建了我的项目,然后在/ MyProject文件夹中我可以处理文件并使用ng serve查看结果。

我尝试使用命令ng build --prod编译应用程序并使其在生产服务器(仅提供示例应用程序角度4)中工作,我看到/dist文件夹,这是我的问题:

我应该复制/dist文件夹中的所有文件并粘贴到生产服务器的公共文件夹中并打开index.html吗?

此时我应该双击/dist/index.html并在网络浏览器中查看结果吗?因为我看到一个空白页面,<app-root></app-root>内没有任何内容。

我还需要做点什么吗?有什么帮助吗?

2 个答案:

答案 0 :(得分:2)

您需要一个HTTP(或Web)服务器来为您的角度应用程序提供服务。并将您的服务器指向dist目录(或将您的dist文件夹内容移动到生产服务器默认目录)。

  

如果应用使用Angular路由器,则必须将服务器配置为在被要求提供其没有的文件时返回应用程序的主机页面(index.html)。

完整的部署示例位于角色官方网站上... Official Documentation

答案 1 :(得分:1)

虽然您将获得大量描述逐步构建第一个角度应用程序的文档。让我解释你从哪里坚持或需要一点点推动。

我应该复制/ dist文件夹中的所有文件并粘贴到生产服务器的公共文件夹中并打开index.html吗?

是的!它所有生成的代码和cli都知道你要问的是你将在生产服务器中放置的代码,如tomcat或任何Web服务器。所以你可以直接复制它,它会起作用

当你制作一个生产版本时,angular会像缩小,移动的资源,编译的打字稿到javascript等一样,并且确实将它们放在dist文件夹中。

如果你想看看什么是构建并且一切正常,你可以在你的机器上安装http server。下面是步骤。

  • 通过命令npm i -g http-server安装http-server。
  • 然后转到您的/dist文件夹,并在命令提示符下通过命令http-server在http服务器中运行生成的代码。
  • 通常它会在端口8080运行,因此请转到http://localhost:8080查看您的更改。

此时我应该双击/dist/index.html并在网络浏览器中查看结果吗?因为我看到一个空白页面,所以内部没有任何内容。

您会看到,因为只打开index.html时未注入角度应用。我想你想要的是一个开发环境。因此,无需构建应用程序,您就可以运行ng serve,它将在调试环境中运行您的代码,您只需转到http://localhost:4200即可看到。