我已經使用angular-cli創建了n個新的角度應用程序。如何部署使用angular-cli構建的angular2應用程序
我完成了應用程序，並使用ng-serve預覽它，它工作完美。
之後，我用ng build - 產品，生成'dist'文件夾。當我將該文件夾放入xampp中運行時，它不起作用。我發現沒有* .js文件，它應該在* .ts - > * .js轉換後（我想）。
我附上了屏幕截圖，其中左側顯示了src文件夾，包含所有.ts文件，中間顯示'dist'文件夾和瀏覽器屏幕截圖。
請指導我如何從angular-cli生成完整的工作應用程序，我可以在我的xampp服務器中運行該應用程序。
截圖：
方法1（流行的一種）： 如果使用角-CLI，那麼
ng build --prod
就可以了。然後你可以從.dist文件夾複製到所有服務器的文件夾
方法2：
您可以使用HTTP服務器，以滿足您的應用程序。要安裝HTTP服務器
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
有效，但首先使用角度cli，您必須使用ng build來構建您的項目 –
您可以鍵入http-server ./dist -o直接在瀏覽器中打開應用程序。 – Damith
謝謝，這是我的工作，但當我刷新頁面時，它沒有發現錯誤 –
我使用的是最新版本的角CLI的（在此時間回覆其1.0.0Beta-18）
方式這個版本的工作原理是它把一切都在捆綁文件中，並在index.html文件中調用它們。之後，您必須將您的資產複製到dist文件夾（出於某種原因，它不會那樣做）。最後，仔細檢查你的基礎href，確保它的設置爲需要設置，然後它應該工作。這對我來說很有用，並且我已經在Apache和Node上進行了測試。
對於任何尋找IIS託管答案的人...
生成項目
ng build --prod
複製./dist文件夾中的所有內容到您的網站保持./dist內的文件夾結構的根文件夾（也就是 - 不要四處移動任何東西）。使用Beta-18版本的angular-cli所有資產（我的例子中的圖片）在構建期間被複制到./dist/assets，並且在其包含的組件中被正確引用。
那麼你也部署了.gz和.map文件？ – EdL
在IIS上，您不必部署.gz文件，只需[配置]（https://www.iis.net/configreference/system.webserver/httpcompression）IIS即可使用動態壓縮，您可以節省很多字節通過電線。 .map文件是源地圖。把它們想象成javascript世界的.pdb，所以是的，如果你想在你要部署的服務器上進行調試。如果沒有它們，醜化JS使得調試非常困難（閱讀：不可能）。 –
我遵循Apache服務器中的方法部署。它工作，但刷新（Cntrl + R）子頁面時頁面顯示爲中斷。例如在我的情況下，該網頁將無法直接訪問http://example.com/question。任何人有一個想法如何解決這個問題？ – srijishks
下面是與Heroku的一個例子：
創建Heroku的帳戶，並安裝CLI
將在package.json的angular-cli DEP到dependencies（以便它被安裝，當你推到的Heroku
添加一個postinstall腳本，該腳本在代碼被推送到Heroku時將運行ng build。將在以下步驟中創建的節點服務器。這會將應用程序的靜態文件放置在服務器上的dist目錄中，然後啓動應用程序。
"scripts": {
// ...
"start": "node server.js",
"postinstall": "ng build --aot -prod"
}
// 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);
heroku create
git add .
git commit -m "first deploy"
git push heroku master
這裏有一個快速writeup我這樣做，有更多詳細信息，包括如何強制要求使用HTTPS，以及如何處理PathLocationStrategy :)
我推薦這個！很好的方式在任何時間在實時環境中查看您的應用程序。有關更多詳細信息，請參閱https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352 – SrAxi
如果您在使用Typescript中的節點服務器使用Angular Universal，該怎麼辦？ –
檢查index.html文件並編輯該line
<base href="/[your-project-folder-name]/dist/">
您的內容應該正確加載。然後，您可以載入樣式全球
應設置基本href作爲與--bh標誌建議由Johan
ng build --prod --bh /[your-project-folder-name]/dist/
不要編輯index.html，使用ng生成/服務與--bh參數 –
哦是的，謝謝，我相信基礎href是他的問題的解決方案。 ng build --prod --bh/[your-project-folder-name]/dist/ –
+1但希望澄清一下，您不需要在終端中包含dist ng build --bh/mycoolapp/< - ----爲我工作 –
使用ng build
集基地標籤的href到/ myUrl /在你的index.html ：
ng build --base-href /myUrl/
ng build --bh /myUrl/
我目前使用的是Angular-CLI 1.0.0-beta.32。3
在項目運行的根目錄NPM安裝HTTP服務器-g
安裝成功運行 納克生成後在成功構建運行--prod
HTTP -server ./dist
我們有多種選擇來部署角度應用程序。我總結了要在IIS中部署它的要點。
什麼版本的angular-cli？你是否在使用--mobile和angular-universal？ – Splaktar