Angular 7 生产构建不加载样式和 js

Question

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

当我运行

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

构建将运行没有错误，如屏幕截图所示。

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

知道是什么原因造成的吗？这些文件与 index.html 在同一目录中，它们确实存在。

Answer 1

将 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。

Answer 2

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

Answer 3

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

所以构建命令实际上是

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

Answer 4

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

另一种选择是配置您的 angular.json 文件。

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

"baseHref": "./"

Angular 7 production build does not load styles and js