Angular 7 生产版本不加载样式和 js答案

【问题标题】：Angular 7 production build does not load styles and jsAngular 7 生产版本不加载样式和 js
【发布时间】：2019-04-13 12:27:36
【问题描述】：

我有一个用 Angular 7 编写的小项目，我正在尝试用它构建生产版本。

当我跑步时

ng build --prod --aot --service-worker

如屏幕截图所示，构建将运行且不会出现错误。

另一方面，当我尝试在浏览器中加载应用程序时，它会在控制台中抛出错误并且根本无法加载。

任何想法是什么原因造成的？这些文件与 index.html 位于同一目录中，并且它们确实存在。

【问题讨论】：

【解决方案1】：

如前所述，您可以使用ng build --prod --base-href ./。

另一个选项是配置您的 angular.json 文件。

您必须在angular.json > projects > yourProject > architect > build > configurations > production 下添加以下行：

"baseHref": "./"

【讨论】：

【解决方案2】：

所以，我发现如果我想在页面前面不使用某种服务器的情况下静态地提供这些文件，我必须设置构建参数--base-href ./，并且还为图片等资产使用相对路径。

所以构建命令实际上是

ng build --prod --aot --service-worker --base-href ./

【讨论】：

【解决方案3】：

使用http-server 在本地运行构建的代码

npm install http-server
http-server --help
http-server -p 8080 -c-1 dist/<project-name>

-p 指定端口，-c-1 禁用缓存，最后一个参数是应该服务的目录。

如果您正在与 Service Worker 一起玩并想测试他们，这是good source of info。

【讨论】：

【解决方案4】：

在为production --prod 编译您的项目后，编译后的输出文件您不能只从浏览器中打开它，您必须在您的机器上使用local server，这样您就可以使用XAMPP

【讨论】：