Angular cli:准备好生产

Question

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

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

ng build --prod

根据我的理解,我应该能够将"/ dist"文件夹的内容粘贴到测试服务器上并运行它

ng serve

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

这实际上是我将要放到测试/生产服务器上的第一个应用程序,所以如果我问的是愚蠢的话,请耐心等待.

Answer 1

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

1. 跑 ng build -e=prod --prod --no-sourcemap --aot

虽然最新版本angular-cli默认为无源图,但值得注意.这-e=prod将确保它使用environments文件夹中定义的生产环境.最后一件事是--aot.如果你的项目中没有特殊的东西,那么很有可能你可以使用提前编译器进行预编译.但是,您可能遇到问题,您可以使用ng serve --aot或--aot完全删除这些问题进行故障排除.

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

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

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

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

gzip on;
gzip_static on;