部署link

Deploying an applicationlink

要部署應用，你必須先編譯它，然後在 Web 伺服器上託管 JavaScript、CSS 和 HTML。建構後的 Angular 應用程式非常容易移植，它可以在任何環境中執行，也可以用任何技術提供服務，比如 Node，Java，.NET，PHP 等等。

To deploy your application, you have to compile it, and then host the JavaScript, CSS, and HTML on a web server. Built Angular applications are very portable and can live in any environment or served by any technology, such as Node, Java, .NET, PHP, and many others.

從 StackBlitz 開始部署link

Share your applicationlink

StackBlitz 專案預設是公開的，你可以透過專案的 URL 來共享你的應用。記住，雖然這是一種共享思路和原型的良好途徑，但並不適合承載產品環境。

StackBlitz projects are public by default, allowing you to share your Angular app via the project URL. Keep in mind that this is a great way to share ideas and prototypes, but it is not intended for production hosting.

1. 在你的 StackBlitz 專案中，請先確保你已經分支或儲存了專案。

   In your StackBlitz project, make sure you have forked or saved your project.

2. 在預覽窗格，你會看到一個形如 https://<Project ID>.stackblitz.io 的 URL。

   In the preview page, you should see a URL that looks like https://<Project ID>.stackblitz.io.

3. 把這個 URL 共享給朋友或同事。

   Share this URL with a friend or colleague.

4. 訪問你的 URL 的使用者會看到啟動了一個開發伺服器，然後就會載入你的應用。

   Users that visit your URL will see a development server start up, and then your application will load.

本地建構link

Building locallylink

要在本地建構應用或未生產環境建構應用，就要從 StackBlitz 專案中下載原始碼。單擊左側選單中的 Download Project 圖示以下載檔案。

To build your application locally or for production, download the source code from your StackBlitz project by clicking the Download Project icon in the left menu across from Project to download your files.

下載並解壓原始碼後，就可以使用 Angular Console 來啟動開發伺服器了，也可以先安裝 Node.js 再使用 Angular CLI 來啟動開發伺服器。

Once you have the source code downloaded and unzipped, install Node.js and serve your app with the Angular CLI.

在終端上，全域性安裝 Angular CLI：

From the terminal, install the Angular CLI globally with:

      
        content_copy
      
      npm install -g @angular/cli
    

這會把命令 ng 安裝到你的系統中，你可以用它的命令來建立新工作區或新專案、啟動開發伺服器、或建構那些可以共享或分發的版本。

This installs the command ng on your system, which is the command you use to create new workspaces, new projects, serve your application during development, or produce builds to share or distribute.

ng new命令用來建立一個新的 Angular CLI 工作空間：

Create a new Angular CLI workspace using the ng newcommand:

      
        content_copy
      
      ng new my-project-name
    

在 CLI 產生的新應用中，將其 /src 目錄替換成你從 StackBlitz 下載的同名目錄，然後進行建構。

In your new CLI generated app, replace the /src folder with the one from your StackBlitz download, and then perform a build.

      
        content_copy
      
      ng build --prod
    

這會產生你要部署的檔案。

This will produce the files that you need to deploy.

託管已建構的專案link

Hosting the built projectlink

dist/my-project-name 資料夾中的檔案都是靜態的，可以託管在任何能夠提供檔案服務的 Web 伺服器上（比如 Node.js，Java，.NET），也可以是任何後端（比如 Firebase，Google Cloud，App Engine 等）。

The files in the dist/my-project-name folder are static. This means you can host them on any web server capable of serving files (such as Node.js, Java, .NET), or any backend (such as Firebase, Google Cloud, or App Engine).

在 Firebase 上託管一個 Angular 應用link

Hosting an Angular app on Firebaselink

要想讓你的網站上線，最簡單的辦法之一就是使用 Firebase 託管它。

One of the easiest ways to get your site live is to host it using Firebase.

1. 在 Firebase 上註冊一個 firebase 賬號。

   Sign up for a firebase account on Firebase.

2. 建立一個新專案，給它任意名字。

   Create a new project, giving it any name you like.

3. 新增 @angular/fire 原理圖，它將使用 ng add @angular/fire 來處理你的發佈。

   Add the @angular/fire schematics that will handle your deployment using ng add @angular/fire.

4. 使用 npm install -g firebase-tools 來全域性安裝 Firebase CLI。

   Install Firebase CLI globally using npm install -g firebase-tools.

5. 把你的 CLI 和 Firebase 帳戶聯絡起來，使用 firebase login 和 firebase init 來初始化這個聯絡。

   Connect your CLI to your Firebase account and initialize the connection to your project using firebase login and firebase init.

6. 遵照下列提示選擇你為託管它而建立的 Firebase 專案。

   Follow the prompts to select the Firebase project you are creating for hosting.

• 在第一個提示中選擇 Hosting 選項。

  Select the Hosting option on the first prompt.

• 選擇你以前在 Firebase 中建立的專案。

  Select the project you previously created on Firebase.

• 選擇 dist/my-project-name 作為公開目錄。

  Select dist/my-project-name as the public directory.

1. 用 ng deploy 命令部署你的應用。

   Deploy your application with ng deploy.

2. 部署之後，訪問 https://your-firebase-project-name.firebaseapp.com 進行即時檢視！

   Once deployed, visit https://your-firebase-project-name.firebaseapp.com to see it live!

在其它地方託管 Angular 應用link

Hosting an Angular app anywhere elselink

要在其它網路主機上託管 Angular 應用，你需要上傳檔案或把它們傳送到那臺主機。由於你正在建構一個單頁面應用，所以你還要確保把所有無效的 URL 都重新導向到 index.html 檔案。在建構與服務和部署指南”中可以找到關於開發和部署應用的更多資訊。

To host an Angular app on another web host, upload or send the files to the host. Because you are building a single page application, you'll also need to make sure you redirect any invalid URLs to your index.html file. Read more about development and distribution of your application in the Building & Serving and Deployment guides.

加入 Angular 社群link

Join the Angular communitylink

你現在是一位 Angular 的開發者了！分享這一刻，告訴我們你對這份“快速上手”的看法，或者為今後的版本提交建議。

You are now an Angular developer! Share this moment, tell us what you thought of this get-started exercise, or submit suggestions for future editions.

Angular 還提供了更多功能，不過你現在已經有了基礎，可以讓你建構一個應用並探索其它的能力：

Angular offers many more capabilities, and you now have a foundation that empowers you to build an application and explore those other capabilities:

• Angular 為移動應用、動畫、國際化、伺服器端渲染等提供了先進的功能。

  Angular provides advanced capabilities for mobile apps, animation, internationalization, server-side rendering, and more.

• Angular Material 提供了豐富的 Material Design 元件庫。

  Angular Material offers an extensive library of Material Design components.

• Angular Protractor 為 Angular 應用提供了一個端到端的測試框架。

  Angular Protractor offers an end-to-end testing framework for Angular apps.

• Angular 還擁有廣泛的第三方工具和函式庫互助網。

  Angular also has an extensive network of 3rd-party tools and libraries.

敬請關注 Angular 官方部落格。

Keep current by following the Angular blog.