Angular CLI:为生产做好准备 [英] Angular cli: getting it ready for production

问题描述

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

I wrote my first Angular 2 application, and I would like to put it onto a test server.

我最近将其转换为Angular-cli项目，并使用以下命令进行了构建:

I recently converted it to an Angular-cli project and built it using the command :

ng build --prod

据我了解，然后我应该能够将"/dist"文件夹的内容粘贴到测试服务器上，并使用

From what I understand, I should then be able to paste the contents of the "/dist" folder onto the test server and run it with

ng serve

但是，如果"/dist"文件夹可以独立运行，为什么我不能作为独立应用程序在PC上运行它(即，我无法将dist文件夹的内容复制到PC上的其他位置并运行它.

However, If the "/dist" folder can run standalone, why am I unable to run it on my pc as a standalone app (ie, I cannot copy the contents of the dist folder to another place on the pc and run it.)

这实际上是我将要安装到测试/生产服务器上的第一个应用程序，所以请耐心等待我问的是不是很愚蠢.

This will actually be the first application I will be putting onto a test/production server, so please bear with me if what I'm asking is silly.

推荐答案

您不应该(但我认为不能)使用ng serve来发布您的内部版本.可以将使用ng build创建的文件上传到Web服务器，然后从该服务器提供服务.

You should not, and I think cannot, use ng serve to publish your build. The files created with ng build can be uploaded to a webserver and served from there.

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

尽管angular-cli的最新版本默认不提供任何源映射，但在此处值得注意. -e=prod将确保它使用在environments文件夹中定义的生产环境.最后一件事是--aot.如果您的项目中没有特别的事情要进行，那么很有可能可以使用提前编译器对其进行预编译.但是，您可能会遇到问题，并且可以使用ng serve --aot进行故障排除，或者完全删除--aot.

Although the latest version of angular-cli defaults to no sourcemaps, it's worth noting here. The -e=prod will make sure it uses the production environment defined inside the environments folder. Last thing is the --aot. If you have no special things going on inside your project, there is a big chance you can have it pre-compiled using the ahead of time compiler. You can however run into problems and you can troubleshoot these using ng serve --aot, or remove the --aot altogether.

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

1. You can then continue to copy the contents of the dist folder to your webserver. It's worth noting though that you should make sure that all non existing file requests on the server will redirect to index.html and the url pointing to your application is in the root.

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

This means for index.html redirection on for instance nginx, you can put this inside your server configuration block:

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

这是www.example.com是否提供dist文件夹中创建的index.html的结果.如果出于某种原因，您希望从子文件夹(如www.example.com/subfolder)提供服务，则应修改生成的index.html中的<base>标记，以指向该子文件夹.

This is if www.example.com serves the index.html created inside the dist folder. If for some reason you would like to serve your application from a subfolder like, www.example.com/subfolder, then you should modify the <base> tag inside the generated index.html to point to this subfolder.

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

If you want to test your production build locally, one option is to install lite-server.

npm install -g lite-server

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

Then navigate in your console to path/to/project/root/dist, and run lite-server. This will create a webserver and open your browser, and serve the generated index.html

如果使用nginx并希望保持凉爽并静态提供生成的.gz文件，则可以将其放置在nginx gzip配置中:

If you use nginx and want to be cool and serve the generated .gz files statically, you can place this inside your nginx gzip configuration:

gzip on;
gzip_static on;

这篇关于Angular CLI:为生产做好准备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！