部署link

Deploymentlink

要部署应用，你必须先编译它，然后在 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 pane, 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, you will need to download the source code from your StackBlitz project. Click the Download Project icon in the left menu across from Project to download your files.

下载并解压源代码后，就可以使用 Angular Console 来启动开发服务器了，也可以先安装 Node 再安装 Angular CLI。

Once you have the source code downloaded and unzipped, use the Angular Console to serve the application, or you install Node and have the Angular CLI installed.

在终端上，全局安装 Angular CLI：

From the terminal, install the Angular CLI globally with:

      
        content_copy
      
      npm install -g @angular/cli
    

这会把命令 ng 安装到你的系统中，你可以用它的命令来创建新工作区或新项目、启动开发服务器、或构建那些可以共享或分发的版本。

This will install the command ng into your system, which is the command you use to create new workspaces, new projects, serve your application during development, or produce builds that can be shared or distributed.

ng new命令用来创建一个新的 Angular CLI 工作空间：

Create a new Angular CLI workspace using the ng newcommand:

      
        content_copy
      
      ng new my-project-name
    

进入你从 StackBlitz 下载的 /src 文件夹，然后执行 build 命令。

From there you 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，Java，.NET），也可以是任何后端（Firebase，Google Cloud，App Engine 等）。

The files in the dist/my-project-name folder are static and can be hosted on any web server capable of serving files (Node, Java, .NET) or any backend (Firebase, Google Cloud, App Engine, others).

在 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. 使用 npm install -g firebase-tools 安装 firebase-tools CLI 来处理你的部署。

   Install the firebase-tools CLI that will handle your deployment using npm install -g firebase-tools.

4. 把你的 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.

5. 按照提示选择你为托管它而创建的 Firebase 项目。

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

6. 用 firebase deploy 命令部署你的应用，这是因为 StackBlitz 已经创建好了一个 firebase.json，它会告诉 Firebase 如何用你的应用提供服务。

   Deploy your application with firebase deploy because StackBlitz has created a firebase.json that tells Firebase how to serve your app.

7. 部署之后，访问 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, you'll need to 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. Learn more about development and distribution of your application in the Building & Serving and Deployment guides.

加入我们的社区link

Join our communitylink

你现在是一位 Angular 的开发者了！分享这一刻，告诉我们你对这份“入门文档”的看法，或者为今后的版本提交建议。

You are now an Angular developer! Share this moment, tell us what you thought of this Getting Started, 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.