部署应用link

Deploying an applicationlink

部署应用是指编译或构建代码并将生成的 JavaScript、CSS 和 HTML 托管到 Web 服务器上的过程。

Deploying your application is the process of compiling, or building, your code and hosting the JavaScript, CSS, and HTML on a web server.

本节基于“入门”教程中的前序步骤，并向你展示如何部署应用。

This section builds on the previous steps in the Getting Started tutorial and shows you how to deploy your application.

先决条件link

Prerequisiteslink

这里的最佳实践是在部署项目之前先在本地运行项目。要在本地运行项目，你需要在计算机上安装以下软件：

A best practice is to run your project locally before you deploy it. To run your project locally, you need the following installed on your computer:

• Node.js.

• Angular CLI。在终端上，使用以下命令全局安装 Angular CLI：

  The Angular CLI. From the terminal, install the Angular CLI globally with:

        
          content_copy
        
        npm install -g @angular/cli
      

  借助 Angular CLI，你可以使用 ng 命令创建新的工作区、新项目、在开发过程中启动开发服务器，或生成要共享或分发的构建成果。

  With the Angular CLI, you can use the command ng to create new workspaces, new projects, serve your application during development, or produce builds to share or distribute.

在本地运行你的应用link

Running your application locallylink

1. 在左边的菜单中点击 Project 后面的 Download Project 图标，以下载你的 StackBlitz 项目的源代码。

   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.

2. 用 ng new命令创建一个新的 Angular CLI 工作区，其中的 my-project-name 就是你要生成的项目名：

   Create a new Angular CLI workspace using the ng newcommand, where my-project-name is what you would like to call your project:

         
           content_copy
         
         ng new my-project-name
       

   此命令会显示一系列配置提示。对于本教程，请接受每个提示的默认设置。

   This command displays a series of configuration prompts. For this tutorial, accept the default settings for each prompt.

3. 在新建 CLI 生成的应用中，用从 StackBlitz 中下载的 /src 文件夹替换原来的 /src 文件夹。

   In your newly CLI-generated application, replace the /src folder with the /src folder from your StackBlitz download.

4. 使用以下 CLI 命令在本地运行你的应用：

   Use the following CLI command to run your application locally:

         
           content_copy
         
         ng serve
       

5. 要在浏览器中查看你的应用，请访问 http://localhost:4200/。如果默认端口 4200 不可用，则可以使用端口标志指定另一个端口，如下所示：

   To see your application in the browser, go to http://localhost:4200/. If the default port 4200 is not available, you can specify another port with the port flag as in the following example:

         
           content_copy
         
         ng serve --port 4201
       

   当启动了应用的开发服务器时，你可以编辑代码并在浏览器中查看对此更改的自动更新。要停止此 ng serve 命令，请按 Ctrl + c 键。

   While serving your application, you can edit your code and see the changes update automatically in the browser. To stop the ng serve command, press Ctrl+c.

构建和托管你的应用link

Building and hosting your applicationlink

1. 要构建用于生产的应用，请使用 build 命令。默认情况下，此命令使用 production 构建配置。

   To build your application for production, use the build command. By default, this command uses the production build configuration.

         
           content_copy
         
         ng build
       

   此命令会创建一个 dist 文件夹，其中包含把你的应用部署到托管服务时所需的全部文件。

   This command creates a dist folder in the application root directory with all the files that a hosting service needs for serving your application.

   如果上述 ng build 命令引发了“缺少软件包”之类的错误，请将缺失的依赖项附加到本地项目的 package.json 文件中，以匹配从 StackBlitz 下载的项目中的依赖项。

   If the above ng build command throws an error about missing packages, append the missing dependencies in your local project's package.json file to match the one in the downloaded StackBlitz project.

2. 把 dist/my-project-name 文件夹的内容复制到 Web 服务器。由于这些文件是静态的，因此你可以将它们托管在任何支持静态文件的 Web 服务器上。（例如 Node.js、Java、.NET 或任何后端（例如Firebase，Google Cloud 或 App Engine）。有关更多信息，请参阅构建与服务以及部署部分。

   Copy the contents of the dist/my-project-name folder to your web server. Because these files are static, 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. For more information, see Building & Serving and Deployment.

下一步是什么link

What's nextlink

在本教程中，你奠定了在移动开发、UX/UI 开发和服务器端渲染等领域探索 Angular 世界的基础。你可以通过研究 Angular 的更多特性、与充满活力的社区互动，以及探索其健壮的生态系统，来更深入地了解 Angular。

In this tutorial, you've laid the foundation to explore the Angular world in areas such as mobile development, UX/UI development, and server-side rendering. You can go deeper by studying more of Angular's features, engaging with the vibrant community, and exploring the robust ecosystem.

了解更多 Angularlink

Learning more Angularlink

一份更深入的教程可以指导你在本地构建应用并探索 Angular 许多最受欢迎的功能，请参阅《英雄之旅》 。

For a more in-depth tutorial that leads you through building an application locally and exploring many of Angular's most popular features, see Tour of Heroes.

要探索 Angular 的基础概念，请参阅“了解 Angular” 部分的指南，例如 Angular 组件概览或模板语法。

To explore Angular's foundational concepts, see the guides in the Understanding Angular section such as Angular Components Overview or Template syntax.

加入社区link

Joining the communitylink

去 Tweet 表示你已经完成了本教程、告诉我们你的想法，或者为以后的版本提出建议。

Tweet that you've completed this tutorial, tell us what you think, or submit suggestions for future editions.

通过关注 Angular 博客来保持更新。

Keep current by following the Angular blog.

探索 Angular 的生态系统link

Exploring the Angular ecosystemlink

要支持你的 UX/UI 开发，请参阅 Angular Material 。

To support your UX/UI development, see Angular Material.

Angular 社区还拥有广泛的第三方工具和库网络。

The Angular community also has an extensive network of third-party tools and libraries.