使用 angular-cli 构建 webpack 的问题答案

【问题标题】：Problems with webpack build, using angular-cli使用 angular-cli 构建 webpack 的问题
【发布时间】：2017-06-14 05:27:51
【问题描述】：

我正在使用带有内置 webpack 的 angular-cli 并遇到以下问题：如果我使用 ng serve --host 0.0.0.0 --port 3000 一切正常，但是当我尝试使用 @ 构建应用程序（无论是开发人员模式还是生产）时987654324@ 然后把它放到我的nginx 中，没有一条路线有效，浏览器每次尝试下载用于起始页的图像，都以 404 错误结束。我究竟做错了什么？谷歌搜索了很多东西，但似乎没有任何解决方案。

一些附加信息：

angular-cli: 1.0.0-beta.21
node: 6.9.4
os: win32 x64

【问题讨论】：

你确定你的nginx配置正确吗？
您是否尝试过使用 nginx 提供最小的 index.html 文件？
@shusson 似乎 nginx 正在尝试在应用程序的文件夹中查找相应的文件，但实际上只有 index.html 和 main.bundle.js，因为这就是 webpack 构建应用程序的方式。有什么可用的解决方案吗？
一个 index.html 文件就是 nginx 所需要的。您应该查看单页应用程序是如何工作的。也许尝试使用不同的服务器，如 pythons SimpleHttpServer。

标签： node.js angular nginx webpack angular-cli

【解决方案1】：

所以对于遇到这个问题的每个人，经过一番研究我发现了这个：

1) 要解决样式无法正确加载的问题，请将encapsulation: ViewEncapsulation.None 添加到您的每个组件@Component() 装饰器中，这样它将正确地捆绑样式。更多信息在这里：https://angular.io/docs/ts/latest/guide/component-styles.html#!#loading-styles

2) 确保所有图像都存储在assets 文件夹中。如果您将它们存储在images 等其他文件夹中，只需将images 文件夹放在assets 中即可

3) 有关在页面重新加载时不起作用的路径的信息，请查看此问题并阅读有关策略的一些信息：Angular 2 : 404 error occur when i refresh through Browser 此链接也有配置示例https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

【讨论】：