在 Heroku 上构建 Angular 4 应用程序时，不包括资产

Posted 2023-03-07

【中文标题】在 Heroku 上构建 Angular 4 应用程序时，不包括资产

【英文标题】：While building Angular 4 app on Heroku, assets are not included

【发布时间】：2018-05-08 20:00:39

【问题描述】：

我在服务器端使用 Node + Express 并在客户端使用 Angular 4 创建了一个 Web 应用程序。

我可以使用 angular-cli (ng build --aot -prod) 在本地构建这个应用程序，一切正常：使用所有 css/jss 包创建一个 dist 文件夹， index.html、favicon.ico 和 assets 文件夹被复制到这个 dist 文件夹中。

现在，我正在尝试使用 git push 在 Heroku 上托管这个应用程序，并使用 package.json 上的 NPM 安装后脚本直接在 Heroku 上构建它：

...
  "scripts": 
    ...
    "postinstall": "ng build --aot -prod"
  ,
...

似乎一切正常，构建过程成功，但问题是 assets 文件夹未复制到 dist 文件夹中，因此我的应用没有可用的资产（其中表示我的应用程序上没有提供/显示图像）。

我正在使用的文件夹结构：

node_modules
server
dist    // created on build process
src
-- app
-- assets
-- favicon.ico
-- index.html
-- styles.css
server.js
.angular-cli.json
package.json
package-lock.json

【问题讨论】：

介意我如何为您的应用程序提供服务吗？它是否有两个域指向一个前端和一个后端？

我正在使用单个域，在服务器端使用 node + express，静态提供 dist 文件夹：app.use(express.static(path.join(__dirname, 'dist')));

我可以看看你的文件夹结构吗？

我已经用它更新了问题。

你的 server.js 在你有 app.use 的地方吗？

【参考方案1】：

经过一段时间的努力，我终于解决了这个问题，所以我在这里发布它，以便它可以帮助某人。

这是一个愚蠢的错误，花了很长时间才弄清楚。

问题是自开发开始以来，我已经从我的主 git 存储库（使用 .gitignore 文件）中删除了图像，因为我正在进出大量资产并且不想跟踪他们在 git 上。

这样，当使用 git 将文件推送到 heroku 时，这些文件并没有被复制，因为这些文件没有包含在 repo 中。虽然那里有一个资产文件夹，但它是空的。

所以，我刚刚在 repo 中包含了图像（从 .gitignore 中删除了规则），现在一切正常。