如何部署使用angular cli构建的angular2应用程序

我已经使用angular cli创建了n个新的angular应用程序

我完成了应用程序，并使用ng serve进行了预览，它工作得非常好

在此之后，我使用了ng build--prod，它生成“dist”文件夹。当我将该文件夹放在xampp中运行时，它不工作。我发现没有*.js文件，在*.ts->*.js转换后（我想）应该在那里

我附上了屏幕截图，左边显示的是包含所有.ts文件的src文件夹，中间显示的是“dist”文件夹和浏览器屏幕截图

请指导我如何从angular cli生成完全工作的应用程序，我可以在我的xampp服务器中运行该应用程序

截图：

方法1（流行方法）： 如果您使用的是angular cli，则

ng build --prod

我会成功的。然后，您可以将

.dist

文件夹中的所有内容复制到服务器文件夹中

方法2:

ng build --base-href /myUrl/
ng build --bh /myUrl/

您可以使用http服务器为您的应用程序提供服务。安装http服务器的步骤

npm install http-server -g

在进入项目文件夹后

http-server ./dist 

它将为您文件夹中的所有文件提供服务。您可以检查终端您可以使用什么ip地址和端口来访问应用程序。现在打开浏览器并键入

ip-adress:port/index.html

希望它能帮助你：）

奖金： 如果你想在heroku部署。请仔细阅读本教程

---

我正在使用Angular CLI的最新版本（在回复时为1.0.0Beta-18）

---

这个版本的工作方式是将所有内容放在bundle文件中，并在index.html文件中调用它们。之后，您必须将您的资产复制到dist文件夹（由于某些原因，它不会这样做）。最后，仔细检查您的基本href，确保其设置为需要设置的值，然后它就可以工作了。这正是我的工作原理，我已经在Apache和Node上进行了测试。

对于任何想要寻找IIS托管解决方案的人

构建您的项目

ng build --prod

---

将./dist文件夹的所有内容复制到网站的根文件夹中，保持./dist中的文件夹结构（即-不要移动任何内容）。使用angular cli的Beta-18版本，所有资产（在我的例子中是图像）在构建过程中都被复制到./dist/assets，并且在其包含的组件中被正确引用。

以下是Heroku的一个示例：

创建Heroku帐户并安装CLI

将

angular cli

dep移动到

package.json

中的

dependencies

（以便在推送到Heroku时安装它）

添加一个

postinstall

脚本，当代码被推送到Heroku时，该脚本将运行

ng build

。还为将在以下步骤中创建的节点服务器添加启动命令。这将把应用程序的静态文件放在服务器上的

dist

目录中，然后启动应用程序

创建一个Express服务器为应用程序提供服务

创建Heroku remote并推送应用程序

---

下面是我做的一个更详细的快速示例，包括如何强制请求使用HTTPS以及如何处理

PathLocationStrategy

：）

检查index.html文件并编辑这一行

<base href="/[your-project-folder-name]/dist/"> 

---

使用带有

--bh

标志的

ng build

在索引中将基本标记href设置为/myUrl/。html:

ng build --base-href /myUrl/
ng build --bh /myUrl/

---

我目前正在使用Angular CLI 1.0.0-beta.32.3

在项目运行的根目录中 npm安装http服务器-g

成功安装后运行 ng构建--prod

成功构建运行后

---

http服务器。/dist

如果有人在使用Nginx，那么下面是完整的解决方案：

假设您想在主机上部署angular应用程序：

http://example.com

和端口：

8080

注意-在您的情况下，主机和端口可能不同

确保index.html头标记中有

首先，在您的机器上转到角度repo（即/home/user/helloWorld）路径

然后，使用以下命令为生产服务器生成/dist：

ng build--prod--base hrefhttp://example.com:8080

现在，将/dist（即/home/user/helloWorld/dist）文件夹从计算机的angular repo复制到要承载生产服务器的远程计算机

现在登录到远程服务器并添加以下nginx服务器配置

server {

    listen 8080;

    server_name http://example.com;

    root /path/to/your/dist/location;

    # eg. root /home/admin/helloWorld/dist

    index index.html index.htm;

    location / {

        try_files $uri $uri/ /index.html;

        # This will allow you to refresh page in your angular app. Which will not give error 404.

    }

}

现在重新启动nginx

就这样！！现在，您可以访问您的angular应用程序

---

希望这会有帮助。

http服务器不支持客户端路由，所以除了基本URL之外，没有其他东西可以工作。相反，您可以使用：

---

在将应用程序部署到Web服务器上之前，只能在本地对其进行测试。要了解如何在Web服务器上实际部署应用程序，请查看，其中讨论了构建部署时应注意的事项，并提供了生产中常用的各种不同Web服务器的配置。

什么版本的angular cli？您使用的是--mobile和angular universal吗？可以，但首先使用angular cli，您必须使用ng build构建您的项目。您可以键入http server./dist-o直接在浏览器中打开应用程序。谢谢，这对我来说很有用，但当我刷新页面时，却找不到错误。我与Saravanan处于同一条船上。我可以从./dist文件夹中运行http服务器，但只有根路径有效。（就我而言）加载应用程序。但是，如果用户有任何路线书签，比如，它抛出一个404。没有明显的重定向功能。所以您也部署了.gz和.map文件？在IIS上，您不必部署.gz文件，只要IIS使用动态压缩，就可以节省大量字节。.map文件是源映射。可以将它们看作javascript世界中的.pdb，所以如果y

ng build --prod --bh /[your-project-folder-name]/dist/

ng build --base-href /myUrl/
ng build --bh /myUrl/

server {

    listen 8080;

    server_name http://example.com;

    root /path/to/your/dist/location;

    # eg. root /home/admin/helloWorld/dist

    index index.html index.htm;

    location / {

        try_files $uri $uri/ /index.html;

        # This will allow you to refresh page in your angular app. Which will not give error 404.

    }

}

npm install -g angular-http-server
ng build --prod
cd dist
angular-http-server