如何将Angular应用部署到生产环境

Question

我对Angular 5的某些方面还有一些不确定。我已经开发了一个应用程序，但不知道如何在生产环境中运行它。

目前我使用ng serve在NodeJS中运行我的应用程序，但在生产环境中是否相同呢？

谢谢！

- Gfuentes

Answer 1

ng serve

ng serve 是用于开发目的的。请查看文档。

使用 ng serve 时，编译输出是从内存中提供的，而不是从磁盘中提供的。这意味着正在提供的应用程序不位于 dist 文件夹中的磁盘上。

ng build

ng build --prod 用于生产目的。请查看文档。

ng build 编译应用程序到一个输出目录中。构建工件将被存储在你的 angular 应用程序根目录下的 dist/ 目录中。

只需将 dist 文件夹复制到任何服务器（如IIS或Node Express），你的 angular 应用程序就可以运行了。

要使用 IIS 部署你的应用程序，请参考此链接；要使用 Node Express 部署，请参考此链接。

- Shaiju T

Answer 2

通常情况下，我不会使用Angular CLI内置的Web服务器进行生产部署。

使用Angular CLI，您可以使用以下命令创建生产构建。

ng build –prod 

那将会创建一个名为 dist 的文件夹，你可以上传到任何你选择的 web 服务器上来部署一个应用程序。

- JeffryHouser

Answer 3

首先，您应该使用ng build --prod来构建您的应用程序以供生产使用。

在您的项目文件夹中，您会找到一个dist文件夹。这是您的应用程序的生产就绪版本。

现在，您需要一个服务器来部署您的应用程序。安装https://www.npmjs.com/package/http-server，然后使用http-server dist/myProject运行（将myProject替换为您的项目名称）。

- Vibhor Dube

Answer 4

ng build 命令会在 outDir 文件夹中生成生产文件。

要知道它的位置，可以查看 .angular-cli.json 文件并查看 apps > outDir 属性。例如：

"apps": [
{
  "root": "src",
  "outDir": "../../webapp/recorder",
  "assets": [
    "assets",
    "favicon.ico"
  ],

...

这些文件仅包含HTML、CSS和JavaScript，可在任何Web服务器上使用。

- Fábio Pereira de Souza

Answer 5

按照以下Angular CLI指示进行操作：

1- 构建您的项目（用于生产模式）

ng build --prod

2- 如果你想在将项目部署到真实服务器之前在生产模式下查看它，你可以使用 lite-server 在本地机器上提供项目服务。

• 首先安装lite-server

  npm i lite-server --save-dev
  

• 然后在本地服务器上运行您的项目

  lite-server --baseDir="dist/your-project-name"
  

- Kamran Taghaddos