Node.js Angular 2找不到通过节点服务器上载的图像

我在Angular 2中有一个应用程序，决定添加真正的服务器Node JS来上传文档和做其他事情

Browser => Angular [localhost:4200/api/documents] => Node [localhost:3000/documents]

这就是我如何使用package.json中的脚本将它们一起启动的方式

"scripts": {
    "server-start": "gulp",
    "client-start": "ng serve --verbose --proxy-config server.conf.json",
    "start": "npm-run-all -p client-start server-start"
}

"root": "src",
"outDir": "dist",
"assets": [
  "assets",
  "favicon.ico",
  "service-worker.js"
],
"index": "index.html",
"main": "main.ts"

所以，当我运行NPMStart时，它会启动两个并行进程——使用Gulp的NodeJS和使用ng serve的Angular。Angular是前端，但所有以/api开头的URL都会重定向到节点。下面是如何使用server.config.js

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

Node JS从Angular接收带有图像的流，并将其保存在Angular assets文件夹中，所以上传的图像应该在Angular中可用，但当我尝试在浏览器中打开上传的图像时，它返回404，未找到。以防万一，这是我的.angular cli.json的一部分

"scripts": {
    "server-start": "gulp",
    "client-start": "ng serve --verbose --proxy-config server.conf.json",
    "start": "npm-run-all -p client-start server-start"
}

"root": "src",
"outDir": "dist",
"assets": [
  "assets",
  "favicon.ico",
  "service-worker.js"
],
"index": "index.html",
"main": "main.ts"

例如，我有一个在ng serve

F:\Node\cms\src\assets\uploads\1.jpg

在上提供，它可以工作

http://localhost:4200/assets/uploads/1.jpg

我把新的上传到同一个位置

F:\Node\cms\src\assets\uploads\5.jpg

但是现在还没有

http://localhost:4200/assets/uploads/5.jpg

当我重新启动服务器时，映像将可用。根据ng serve在后台执行Angular应用程序的部署，并且文件夹dist为空，所有图像都是从内存中获取的，任何放入资源的新图像都将不可用，如果我是wronng，请更正我

问题#1:如果在应用程序已在内存中运行时添加动态图像，内置Angular server是否能够处理这些图像

---

问题#2:在复杂的应用程序中，ng SERVICE带来的麻烦多于好处，是否值得尝试让它工作起来，或者您建议开始使用ng build？运行应用程序时，所有内容都指向构建文件夹。不是“src”

每次运行“我的服务”或需要将图像存储在不同的位置时，您可能都会删除这些图像

---

从技术上讲，您将图像存储在“服务器”上，因此我建议使用node来检索这些文件的路径。

运行应用程序时，所有内容都指向构建文件夹。不是“src”

每次运行“我的服务”或需要将图像存储在不同的位置时，您可能都会删除这些图像

---

从技术上讲，您将图像存储在“服务器”上，因此我建议使用node来检索这些文件的路径。

您应该使用ng build而不是ng serve。ng serve用于开发目的。看

此外，在运行ng build之后，您需要在实际服务器上拥有dist文件夹。下面是一个来自Angular wiki的示例

ng构建——观察

lite服务器--baseDir=“dist”

您还可以让节点使用内置在节点中的静态方法为dist文件夹提供服务。 要添加的行可以是

app.use（express.static（'dist'））

或

app.use（express.static（path.join（\uu dirname，'dist'）））

看

---

我更喜欢使用ng build-aot来尽可能减小捆绑包的大小，然后使用nginx为dist文件夹提供服务。

您应该使用ng build而不是ng serve。ng serve用于开发目的。看

此外，在运行ng build之后，您需要在实际服务器上拥有dist文件夹。下面是一个来自Angular wiki的示例

ng构建——观察

lite服务器--baseDir=“dist”

您还可以让节点使用内置在节点中的静态方法为dist文件夹提供服务。 要添加的行可以是

app.use（express.static（'dist'））

或

app.use（express.static（path.join（\uu dirname，'dist'）））

看

---

我更喜欢使用ng build-aot使捆绑包的大小尽可能小，然后使用nginx为dist文件夹提供服务。

您需要在node中为该文件夹设置静态路由，因为node无权访问该文件夹location@Judson特瑞尔：问题是节点中的上传工作正常，所以问题肯定是在节点中。为了证明这一点，我尝试从ng serve开始Angular，然后手动将图像添加到Angular的资产文件夹中，但仍然不起作用。在节点中上传只是我试图实现的一个例子。这很奇怪。您需要让node处理所有文件路径，并在端口3000上全部返回它们。我在angular应用程序中使用一个配置文件将节点实例的URL:PORT动态附加到映像路径上。对于静态图像，我只指向angular assets文件夹。源资源中的任何内容都应该在构建文件夹中。我认为，使用单独的图像URL的idea可以在节点中工作，需要尝试此操作您需要在节点中为该文件夹设置静态路由，因为节点无权访问该文件夹location@Judson特瑞尔：问题是节点中的上传工作正常，所以问题肯定是在节点中。为了证明这一点，我尝试从ng serve开始Angular，然后手动将图像添加到Angular的资产文件夹中，但仍然不起作用。在节点中上传只是我试图实现的一个例子。这很奇怪。您需要让node处理所有文件路径，并在端口3000上全部返回它们。我在angular应用程序中使用一个配置文件将节点实例的URL:PORT动态附加到映像路径上。对于静态图像，我只指向angular assets文件夹。您在源资源中输出的任何内容都应该在构建文件夹中。我认为，使用单独的图像URL的想法可能在节点中起作用，需要尝试一下