如何部署使用angular-cli构建的angular2应用 [英] how to deploy angular2 app built using angular-cli

问题描述

我已经使用angular-cli创建了一个新的angular应用.

I have created n new angular app using angular-cli.

我完成了该应用程序，并使用ng-serve对其进行了预览，它运行良好.

I completed the app and preview it using ng-serve, it is working perfectly.

之后，我使用了 ng build --prod ，生成了"dist"文件夹.当我将该文件夹放在xampp中运行时，它不起作用.我发现没有* .js文件，应该在* .ts-> * .js转换后放在其中.

After that I used ng build --prod, that generates the 'dist' folder. When I put that folder in xampp to run, it is not working. I found that there is no *.js files, which should be in there after *.ts -> *.js conversion (i suppose).

我已经附上了屏幕截图，其中左侧显示了包含所有.ts文件的src文件夹，中部则显示了"dist"文件夹和浏览器屏幕截图.

I have attached the screenshot, in which on left side it is showing the src folder having all .ts files, On middle it is showing the 'dist' folder and browser screenshot.

请指导我如何从angular-cli生成可正常运行的应用程序，该应用程序可以在我的xampp服务器中运行.

Please guide me how can I generate fully working app from angular-cli, which I can run in my xampp server.

屏幕截图:

推荐答案

方法1(受欢迎的一种): 如果您使用angular-cli，则

method 1(popular one) : If you are using angular-cli, then

ng build --prod

可以解决问题.然后，您可以将所有内容从.dist文件夹复制到服务器文件夹

will do the trick. Then you can copy everything from .dist folder to your server folder

方法2:

您可以使用http-server服务您的应用程序.要安装http-server

you can use http-server to serve your app . To install http-server

npm install http-server -g

并转到项目文件夹

http-server ./dist 

它将提供您文件夹中的所有文件.您可以检查终端可用于访问应用程序的IP地址和端口.现在打开浏览器并输入

it will serve all the files in your folder. you can check the terminal what ip-address and port you can use to access the application. Now open up your browser and type

ip-adress:port/index.html

希望它会对您有所帮助:)

Hope it will help you :)

奖金: 如果要在heroku中部署.请仔细阅读本教程 https://medium. com/@ ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352

Bonus : If you want to deploy in heroku. Please go through this detailed tutorial https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352

这篇关于如何部署使用angular-cli构建的angular2应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！