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

Question

我使用angular-cli创建了一个新的角度应用程序。

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

之后我使用 ng build --prod ，生成'dist'文件夹。当我将该文件夹放在xampp中运行时，它无法正常工作。我发现没有* .js文件，在* .ts之后应该在那里 - ＆gt; * .js转换（我猜）。

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

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

截图：

Answer 1

方法1（受欢迎的方法）： 如果你使用的是angular-cli，那么

ng build --prod

会做到这一点。然后，您可以将.dist文件夹中的所有内容复制到服务器文件夹

方法2：

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

npm install http-server -g

并转到您的项目文件夹

http-server ./dist 

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

ip-adress:port/index.html

希望它能帮到你:)

加分： 如果你想在heroku中部署。请仔细阅读这个详细的教程 https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352

Answer 2

对于寻找IIS托管答案的人来说......

构建项目

ng build --prod

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

Answer 3

检查index.html文件并编辑此行

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

您的内容应正确加载。然后，您可以全局加载样式

您应该按照Johan

的建议设置基本href

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

Answer 4

以下是Heroku的一个例子：

1. 创建一个Heroku帐户并安装CLI

2. 将angular-cli dep移至dependencies中的package.json（以便在您推送到Heroku时安装它。

3. 添加postinstall脚本，当代码被推送到Heroku时，该脚本将运行ng build。还要为将在以下步骤中创建的节点服务器添加启动命令。这会将应用程序的静态文件放在服务器上的dist目录中，然后启动应用程序。

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

1. 创建一个Express服务器来为该应用程序提供服务。

// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

1. 创建一个Heroku遥控器并推送以消除应用程序。

heroku create
git add .
git commit -m "first deploy"
git push heroku master

这是一个快速writeup我做的更详细，包括如何强制使用HTTPS的请求以及如何处理PathLocationStrategy：）

Answer 5

将ng build与--bh标志

一起使用

在index.html中将基本标记href设置为/ myUrl /：

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

Answer 6

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

此版本的工作方式是将所有内容放入捆绑文件中，然后在index.html文件中调用它们。之后，您必须将资产复制到dist文件夹（由于某种原因，它不会这样做）。最后，仔细检查你的基础href，确保它设置为需要设置的值然后它应该工作。这对我有用，我在Apache和Node上都进行了测试。

Answer 7

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

在项目运行的根目录中 npm install http-server -g

成功安装后运行 ng build --prod

成功构建运行 http-server ./dist

Answer 8

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

假设您要在主持人处部署角度应用：http://example.com和PORT：8080 注 - 在您的情况下，HOST和PORT可能会有所不同。

确保index.html头标记中有<base href="/">。

1. 首先，转到您机器上的角度回购（即/ home / user / helloWorld）路径。

2. 然后使用以下命令为生产服务器构建/ dist：

   ng build --prod --base-href http://example.com:8080

3. 现在将copy / dist（即/ home / user / helloWorld / dist）文件夹从您机器的angular repo复制到您要托管生产服务器的远程计算机。

4. 现在登录到您的远程服务器并添加以下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.
   
       }
   
   }
   

5. 现在重启nginx。

6. 就是这样!!现在，您可以在http://example.com:8080

访问角度应用

希望它会有所帮助。

Answer 9

http-server不支持客户端路由，因此基本URL之外的其他任何内容都不起作用。相反，您可以使用angular-http-server：

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

这应仅用于在将应用程序本地测试之前将其部署到Web服务器上。要了解如何在Web服务器上实际部署应用程序，请查看Angular.io article on deployment，其中讨论了构建部署时要考虑的注意事项，并提供了生产中常用的各种不同Web服务器的配置。