如何将 Angular 2 应用程序独立部署（使用 dist 文件夹）答案

【问题标题】：How to deploy Angular 2 application as a standalone (using dist folder)如何将 Angular 2 应用程序独立部署（使用 dist 文件夹）
【发布时间】：2017-07-23 19:19:00
【问题描述】：

我已经完成了 Angular 2 应用程序的开发，我需要部署它。我需要它独立工作。因此，我尝试将 dist 文件夹的内容移动到一个新的 apache 网站中，但由于某种原因路由机制不起作用，例如，当我尝试转到 /integrations 路由时出现 404 错误。在开发过程中，在 Angular 2 服务器上，/integrations 工作，Angular 2 路由机制工作并显示组件没有问题。我需要独立应用程序也能够使用不同的 URL/路径。有什么建议吗？

【问题讨论】：

标签： angular deployment routing routes

【解决方案1】：

按照以下步骤操作：

第 1 步： ng build --prod --env=prod

第 2 步。（复制 dist 到服务器）然后创建 dist 文件夹，复制 dist 文件夹并将其部署在服务器的根目录中。

第 3 步。在根文件夹中创建.htaccess 文件并将其粘贴到.htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

【讨论】：

嗨。谢谢。实际上 --env=prod 解决了我的问题。我自己发现了这一点。我会给你正确的答案，因为它是。
是的，我知道您已经使用生产环境创建了 dist 文件夹。只是想知道您错过了 .htacces 文件。因此，只需说明步骤，以便每个人都可以遵循。
我已经使用ng build --aot 构建了文件。导航和一切工作正常。当我点击登录页面时，它把我带到了那里。问题是当我刷新登录页面时，它会给出 404 not found 错误。有什么想法吗？

【解决方案2】：

是的，您需要关注the angular 2 documentation deployment

它解释了如何回退到 index.html 并给你一个 apache 的例子

【讨论】：

我添加了 .htaccess，但仍然没有运气。我不知道如何将这个路由的东西从 angular 转换为 javascript .....这是在编译过程中自动完成的。我可能以错误的方式执行 .htacces 或其他什么......
您的问题解决了吗？你可以在这里发布你的 .htaccess 吗？