Angular cli : getting it ready for production

Question

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

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

ng build --prod

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

ng serve

但是，如果“/dist”文件夹可以独立运行，为什么我无法将它作为独立应用程序在我的电脑上运行(即，我无法将 dist 文件夹的内容复制到电脑上的另一个位置并运行它。)

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

Answer 1

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

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

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

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

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

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

如果 www.example.com 服务于 index.html在 dist 文件夹中创建。如果出于某种原因您希望从子文件夹(例如 www.example.com/subfolder)提供您的应用程序，那么您应该修改 <base>生成的 index.html 中的标签指向这个子文件夹。

如果您想在本地测试您的生产版本，一种选择是安装 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;