Angular cli：为生产做好准备

Question

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

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

ng build --prod

据我所知，我应该能够将“/dist”文件夹的内容粘贴到测试服务器上，然后运行使用

ng serve

但是，如果“/dist”文件夹可以运行独立，为什么我不能运行它在我的电脑上作为一个独立的应用程序（即，我不能复制dist 文件夹到电脑上的另一个地方并运行它。）

这实际上是我将放在 test/production 服务器上的第一个应用程序，所以如果我问的问题很愚蠢，请多多包涵。

Answer 1

您有两个选择：您可以复制您的应用程序和运行 ng serve --prod（我认为这有点过分），或者您可以将您的 ./dist 复制到其他服务器并使用一些服务器软件（即 nginx、apache、express - 有很多，你可以选择你熟悉的那个）。您只需要将所有请求（不是文件请求）传递给 index.html，因为 angular 应用程序是 SPA。这是 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

Answer 2

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

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

虽然最新版本angular-cli默认没有sourcemaps，但这里值得注意。 -e=prod 将确保它使用 environments 文件夹中定义的生产环境。最后一件事是 --aot。如果您的项目中没有特殊的事情发生，那么您很有可能 pre-compiled 使用提前编译器。但是，您可以运行遇到问题，并且可以使用 ng serve --aot 解决这些问题，或者完全删除 --aot。

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

这意味着 index.html 重定向例如 nginx，你可以把它放在你的服务器配置块中：

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。这将创建一个网络服务器并打开您的浏览器，并提供生成的 index.html

如果你使用 nginx 并且想要很酷并静态地提供生成的 .gz 文件，你可以将它放在你的 nginx gzip 配置中：

gzip on;
gzip_static on;

Answer 3

nb build --prod 将所有需要的文件放入 dist 文件夹。

您不需要 ng serve 到运行构建的项目。

您需要将 dist 内容放入任何服务器（甚至是某种本地主机）

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

Angular cli：为生产做好准备

Angular cli: getting it ready for production

production

angular-cli

angular