Angular CLI: 准备好生产环境

Question

我写了我的第一个Angular 2应用程序，我想把它放到测试服务器上。

最近我将其转换为一个Angular-cli项目，并使用以下命令构建：

ng build --prod

据我所了解，我应该能够将“/dist”文件夹的内容粘贴到测试服务器上，并使用以下命令运行：

ng serve

然而，如果“/dist”文件夹可以独立运行，为什么我无法将其作为独立应用程序在我的电脑上运行（即，我无法将dist文件夹的内容复制到电脑上的其他位置并运行）？这将是我要放在测试/生产服务器上的第一个应用程序，请谅解我提出的问题可能有些愚蠢。

- Seeker

Answer 1

你不应该，也我认为不能使用ng serve来发布你的构建。使用ng build创建的文件可以上传到Web服务器并从那里提供服务。

1. 运行ng build -e=prod --prod --no-sourcemap --aot

尽管最新版本的angular-cli默认不生成sourcemaps，但在这里值得注意。 -e=prod将确保它使用environments文件夹中定义的生产环境。最后一件事是--aot。如果您的项目内没有特殊情况，您很有可能可以使用预编译器进行预编译。但是，您可能会遇到问题，您可以使用ng serve --aot进行故障排除，或者完全删除--aot。

2. 然后，您可以继续复制dist文件夹的内容到您的Web服务器。但值得注意的是，您应该确保服务器上所有不存在的文件请求都将重定向到index.html，并且指向您的应用程序的URL位于根目录下。

这意味着对于例如nginx上的index.html重定向，您可以将其放置在服务器配置块中：

location / {
  try_files $uri $uri/ /index.html;
}

如果www.example.com提供在dist文件夹中创建的index.html，则应如此操作。 如果由于某种原因您想要从子文件夹（如www.example.com/subfolder）中提供应用程序，则应修改生成的index.html中的<base>标记以指向该子文件夹。

如果要在本地测试生产版本构建，一种选择是安装lite-server。

npm install -g lite-server

然后在控制台中导航到path/to/project/root/dist并运行lite-server。这将创建一个Web服务器并打开您的浏览器，提供生成的index.html。

如果您使用nginx并想很酷地静态提供生成的.gz文件，则可以将以下内容放入您的nginx gzip配置中：

gzip on;
gzip_static on;

- Poul Kruijt

---

非常感谢你，已经在 lite-server 上运行了（尽管引导程序没有加载，所以我需要进行一些配置）。其他人也提供了帮助，但是你的 lite-server 建议尤其有用。将此标记为答案。 - Seeker

Answer 2

nb build --prod 命令会将所有必需的文件放入 dist 文件夹中。

你不需要使用 ng serve 来运行构建后的项目。

你需要将 dist 文件夹中的内容放入任何服务器（甚至是本地主机）中。

ng serve 仅用于带有实时重新加载的开发。

- DDRamone

Answer 3

你有两个选项：你可以复制你的应用程序并运行ng serve --prod（我认为这有点过度），或者你可以将你的./dist复制到另一台服务器上并使用一些服务器软件（例如nginx、apache、express等——有很多选择，你可以选择自己熟悉的）。你所需做的就是将所有非文件请求传递给一个名为index.html的文件，因为Angular应用程序是单页应用程序。下面是Apache服务器的.htaccess示例：

RewriteEngine On  
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

- Ledzz

---

虽然这个 .htaccess 文件基本上可以工作，但如果我使用像 /members 这样的路由，它会将它们重定向到 /index.html，如果我直接在浏览器地址栏中输入它们。这不是我想要的，也不是 ng serve 所做的。你知道怎么支持这些路径吗？ - LetzFlow