Angular 6 | Express:在dist文件上出现404错误

时间:2018-05-23 09:27:12

标签: node.js angular express angular6

感谢您抽出宝贵时间阅读我的问题。我运行服务时,我的网站运行正常。当我运行build build --prod时,它也可以运行。问题是,当我尝试在dist中渲染index.html时会出现404错误。我的main,styles和polyfill文件的错误是404错误。我试图建立一个后端,以便我可以处理信用卡付款。任何帮助将不胜感激 - 现在已经无数决心将我的头撞在墙上几个小时。这是我的代码:

server.js

public void performAnimation(int[] location) {

    ImageView imageView = new ImageView(getContext());
    imageView.setImageDrawable(getActivity().getDrawable(R.drawable.ic_imageview));
    ConstraintLayout.LayoutParams params =
            new ConstraintLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

    params.setMargins(0, location[0], 0, location[1]);

    imageView.setLayoutParams(params);
    parentViewGroup2.addView(imageView);


    ObjectAnimator translateAnim = ObjectAnimator.ofFloat(imageView, View.TRANSLATION_Y, 0.5f);
    translateAnim.setDuration(2000);
    translateAnim.start();

的src / index.html的

var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');

app.use(express.static(__dirname));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

server.listen(2000, function(){
    console.log('Listening on 2000..')
});
console.log(__dirname);


app.get('/', (req, res) => {
    res.sendFile(__dirname + '/dist/culture/index.html');
});

DIST / index.html中

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Culture</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
  <app-root></app-root>

</body>
</html>

再次,简而言之,localhost提供200个代码,这意味着它连接到正确的位置。问题是一旦连接它就找不到任何文件。我究竟做错了什么?感谢

1 个答案:

答案 0 :(得分:4)

如果您的Angular应用文件位于app.use(express.static(__dirname));目录中,则必须更正以下代码:app.use(express.static(path.join(__dirname, 'dist/culture')));dist/culture

主要问题是当您的index.html尝试加载<link rel="icon" type="image/x-icon" href="favicon.ico">时,它会使用路径http://localhost:2000/favicon.ico的请求。您的express后端已在__dirname上定义了静态资源,而您的实际应用位于dist/culture,因此您的请求应如http://localhost:2000/dist/culture/favicon.ico

应用更改改进了静态文件位置的配置。