你如何部署Angular應用程序？

Question

一旦他們到達生產階段，您將如何部署Angular應用程序？

到目前爲止，我所見過的所有指南（即使在angular.io上）都指望lite服務器用於服務和browserSync以反映更改 - 但是當您完成開發時，如何發佈應用程序？

我是否將所有已編譯的.js文件導入index.html頁面或使用gulp將它們縮小？他們會工作嗎？生產版本中是否需要SystemJS？

Answer 1

你實際上在這裏碰到一個問題。首先是如何託管您的應用程序。而@toskv提到了它的真正太廣泛的問題，需要回答並取決於許多不同的事情。第二個更具體 - 你如何準備應用程序的部署版本。這裏有幾種選擇：

1. 按原樣部署。就是這樣 - 不要縮小，拼接，命名等等。將所有的ts項目全部轉移，將所有生成的js/css/... sources +依賴關係複製到託管服務器上，並且很好。
2. 使用特殊捆綁工具進行部署。像webpack或systemjs構建器一樣。他們擁有＃1缺乏的所有可能性。你可以將你所有的應用代碼打包成你在html中引用的幾個js/css/...文件。 Systemjs buider甚至可以讓你擺脫包含systemjs作爲部署包的一部分的需要。

是的，你很可能需要部署systemjs和一堆其他外部庫作爲你的包的一部分。是的，你將能夠將它們捆綁到你從html頁面引用的幾個js文件中。您不必從頁面引用所有已編譯的js文件，但systemjs作爲模塊加載程序將處理此問題。

我知道這聽起來很渾 - 幫助您開始使用＃2這裏有兩個真的很好示例應用程序：

SystemJS建設者：angular2 seed

的WebPack：angular2 webpack starter

看看他們是怎麼做它 - 希望這可以幫助你找到你捆綁應用程序的方式。

Answer 2

希望這可能會有幫助，並希望我會在一週內嘗試這個。

1. 在Azure中創建Web應用程序
2. 在VS代碼創建角度2應用程序。
3. Webpack to bundle.js。
4. 下載Azure的網站上發佈的配置文件XML
5. 配置使用 https://www.npmjs.com/package/azure-deploy與網站的個人資料Azure的部署。
6. 部署。
7. 品嚐奶油。

Answer 3

簡單的答案。使用Angular CLI並在您的項目的根目錄中發出

ng build 

命令。該網站將在dist目錄中創建，您可以將其部署到任何Web服務器。

這將建立測試，如果你在你的應用程序的生產設置，您應該使用

ng build --prod 

這將建立在dist目錄中的項目，這可以推到服務器。

自從我第一次發佈這個答案以來發生了很多事情。命令行終於達到了1.0.0，所以按照這個指南去升級你的項目之前，你應該嘗試構建。 https://github.com/angular/angular-cli/wiki/stories-rc-update

Answer 4

使用Angular CLI很容易。對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" 
} 

創建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); 

創建Heroku的遠程和推到depoy該應用。

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

這裏有一個快速writeup我這樣做，有更多詳細信息，包括如何強制要求使用HTTPS，以及如何處理PathLocationStrategy :)

Answer 5

你得到最小，最快加載產品包通過使用前面的時間編譯器進行編譯，並按照角AOT菜譜中所示彙總樹形結構/縮小模式：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

這也適用於Angular-CLI，如下所示：在之前的答案中說過，但如果你沒有使用CLI創建你的應用程序，你應該遵循食譜。

我還有一個使用材料和SVG圖表（由Angular2支持）的工作示例，它包括使用AOT食譜創建的包。您還可以找到創建該軟件包所需的所有配置和腳本。看看這裏：https://github.com/fintechneo/angular2-templates/

我做了一個快速的視頻演示文件的數量和AoT編譯構建的大小與開發環境之間的差異。它顯示了上面的github存儲庫中的項目。你可以在這裏看到：https://youtu.be/ZoZDCgQwnmQ

Answer 6

爲了您的Angular2應用首先部署到生產服務器，確保您的應用程序在本地運行您的機器上。

Angular2應用也可以被部署爲節點的應用程序。

因此，創建一個節點切入點文件server.js/app.js（我的例子中使用快遞）

var express = require('express'), 
    path = require('path'), 
    fs = require('fs'); 

var app = express(); 
var staticRoot = __dirname + '/'; 

app.set('port', (process.env.PORT || 3000)); 

app.use(express.static(staticRoot)); 

app.use(function(req, res, next){ 

    // if the request is not html then move along 
    var accept = req.accepts('html', 'json', 'xml'); 
    if(accept !== 'html'){ 
     return next(); 
    } 

    // if the request has a '.' assume that it's for a file, move along 
    var ext = path.extname(req.path); 
    if (ext !== ''){ 
     return next(); 
    } 

    fs.createReadStream(staticRoot + 'index.html').pipe(res); 

}); 

app.listen(app.get('port'), function() { 
    console.log('app running on port', app.get('port')); 
}); 

另外補充表達在你的package.json文件的依賴。

然後將其部署到您的首選環境。

我已經把一個小博客IIS上部署。遵循link

Answer 7

只需按照下面的鏈接，

更改您的index.html網頁腳本文件路徑 更改component.html路徑櫃面你獲得錯誤找不到位置

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy

Answer 8

Github中角度2部署頁面

測試在ghpages中部署Angular2 Webpack

首先從應用程序的文件夾dist獲得所有相關的文件，對我來說是：在資產文件夾 + main.bundle.js + polyfills.bundle.js + vendor.bundle + css文件.js文件

然後在已創建回購按這個文件。

1 - 如果您希望應用程序的根目錄下運行 - 創建一個名爲特殊回購[yourgithubusername] .github.io和主分支

2推這些文件 - 如果您想要在子目錄中或除根之外的其他分支中創建這些頁面，請創建分支gh-pages並將這些文件推送到該分支中。

在這兩種情況下，我們訪問這些頁面部署將是不同的方式。

對於第一種情況將是HTTPS：// [yourgithubusername] .github.io和用於第二情況下，將[yourgithubusername] .github.io/[回購名稱]。

如果您想要使用第二種情況進行部署，請確保更改dist中index.html文件的基礎URL，因爲所有路由映射取決於您提供的路徑，並且應該設置爲[/分店名稱]。

鏈接到此頁

https://rahulrsingh09.github.io/Deployment

的Git回購

https://github.com/rahulrsingh09/Deployment

Answer 9

對於一個快速和廉價的方式來舉辦一個角度應用程序，我一直在使用Firbase託管。它在第一層免費，並且使用Firebase CLI輕鬆部署新版本。本文在這裏介紹了必要的步驟，您的生產角2應用程序部署到火力地堡：https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

總之，你運行ng build --prod這在包創建一個文件夾，DIST，這就是那個被部署到火力地堡託管的文件夾。

Answer 10

在蔚藍的部署角2容易

1. 運行納克構建--prod，這將產生與裏面的東西幾個文件，包括index.html的捆綁DIST文件夾。

2. 在裏面創建一個資源組和一個web應用程序。

3. 使用FTP放置您的dist文件夾文件。在azure中，它會查找index.html來運行應用程序。

就是這樣。您的應用正在運行！

Answer 11

截至2017年，最好的方法是使用angular-cli（v1.4.4）作爲您的角度項目。

ng build --prod --env=prod --aot --build-optimizer --output-hashing none 

你不必明確添加--aot作爲其默認使用--prod.And使用--output散列是按有關緩存破滅您的個人喜好開啓。

你可以明確地只需添加CDN支持：

--deploy-url "https://<your-cdn-key>.cloudfront.net/" 

，如果你打算使用CDN託管這是相當快的。

Answer 12

隨着Angular CLI，可以使用下面的命令：

ng build --prod 

它生成所有你需要部署的應用程序文件夾DIST。

如果您沒有使用網絡服務器，我建議您使用Angular to Cloud。您只需將dist文件夾壓縮爲zip文件並在平臺上上傳即可。

Answer 13

我會說在角度之前有很多具有Web體驗的人，用於在戰爭中部署它們的Web工件（即，在Java/Spring項目中的jquery和html）。試圖讓我的角度和REST項目分開後，我最終這樣做是爲了解決CORS問題。

我的解決方案是將所有使用CLI生成的angular（4）內容從my-app移動到MyJavaApplication/angular。然後我修改了我的Maven構建，使用maven-resources-plugin將內容從/ angular/dist移動​​到我的發行版的根目錄（即$ project.build.directory}/MyJavaApplication）。默認情況下從角色的角度加載資源。

當我開始添加路由到我的角度項目時，我進一步修改了maven build來將index.html從/ dist複製到WEB-INF/app。並且，添加了一個將所有服務器端休息調用重定向到索引的Java控制器。

Answer 14

要在IIS中部署您的應用程序，請按照以下步驟操作。

第1步：建立使用命令NG構建您的應用程序角--prod

步驟2：構建在所有文件都存儲在您的應用程序路徑的DIST文件夾中。

步驟3：在C上創建的文件夾：\的Inetpub \ wwwroot的按名稱QRCode的。

第4步：將dist文件夾的內容複製到C：\ inetpub \ wwwroot \ QRCode文件夾中。

步驟5：使用命令（窗口+ R）並鍵入INETMGR點擊確定打開IIS管理器。

第6步：右鍵單擊默認網站，然後單擊添加應用程序。

步驟7：輸入別名'QRCode的'和物理路徑設置爲C：\的Inetpub \ wwwroot的\ QRCode的。

步驟8：開放的index.html文件並找到線HREF = 「\」並刪除 '\'。

第9步：現在在任何瀏覽器中瀏覽應用程序。

您也可以關注視頻以獲得更好的理解。

視頻地址：https://youtu.be/F8EI-8XUNZc