Question

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

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

ng build --prod

根据我的理解，我应该能够将“/ dist”文件夹的内容粘贴到测试服务器上并使用

运行它

ng serve

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

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

Answer 1

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

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

虽然angular-cli的最新版本默认没有源图，但值得注意。 -e=prod将确保它使用environments文件夹中定义的生产环境。最后一件事是--aot。如果你的项目中没有特殊的东西，那么很有可能你可以使用提前编译器进行预编译。但是，您可能遇到问题，可以使用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）提供应用程序，则应修改生成的<base>内的index.html标记以指向此子文件夹。< / p>

如果您想在本地测试您的生产版本，可以选择安装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 2

UIView将所有必需的文件放入nb build --prod文件夹。

您不需要dist来运行已构建的项目。

您需要将ng serve内容放入任何服务器（甚至是某种localhost）

dist仅用于实时重新加载的开发。

Answer 3

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

Angular cli：准备好生产

3 个答案: