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

问题描述

我使用 angular-cli 创建了 n 个新的 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

方法二:

您可以使用 http-server 来为您的应用提供服务.安装http服务器

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

npm install http-server -g

然后转到您的项目文件夹

and after going to your project folder

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

希望对你有帮助:)

奖励:如果你想在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屋！