Question

我在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"
}

所以，当我运行npm start时，它会启动2个并行进程 - 使用Gulp的Node JS和使用ng服务的Angular。 Angular是前端，但所有以 / api 开头的网址都会重定向到Node。以下是 server.config.js

的完成方式

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

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

的一部分

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

例如，我有 ng服务

之前的现有图像

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

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

问题＃1：是内置的Angular服务器，如果在应用程序已在内存中运行时添加动态图像，则能够处理动态图像吗？

问题2：在复杂的应用中看起来像 ng服务带来的麻烦多于好处，是否值得尝试让它发挥作用或者您推荐开始使用 ng build ？

Answer 1

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

每次运行我的服务时，您可能正在擦除图像，或者需要将它们存储在不同的位置。

您在技术上将图像存储在＆＃34;服务器＆＃34;所以我建议使用node来检索这些文件的路径。

Answer 2

您应该使用ng build而不是ng serve。 ng serve用于开发目的。见https://github.com/angular/angular-cli/wiki/serve

此外，在运行ng build之后，您需要在实际服务器上安装dist文件夹。这是Angular wiki的一个例子 https://github.com/angular/angular-cli/wiki/stories-disk-serve

ng build --watch

lite-server --baseDir="dist"

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

app.use(express.static('dist'))

或

app.use(express.static(path.join(__dirname, 'dist')))

请参阅https://expressjs.com/en/starter/static-files.html

我更喜欢做构建-aot以尽可能减小bundle的大小，然后使用nginx提供dist文件夹。

Angular 2无法找到使用节点服务器上传的图像

2 个答案: