Angular2和节点js中的POST http：// localhost：4200 / addTask 404（未找到），但值已在控制台中打印

app.component.ts

import { Component } from '@angular/core';
import { CharityService} from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [CharityService]
})
export class AppComponent {
  title = 'app';

  [x: string]: any;

      fname  : string;
      lname  : string;
      age    : string;
      address: string;
      city   : string;



      constructor(private charityService:CharityService){
  /*         this.taskService.getTasks()
              .subscribe(tasks => {
                  console.log(tasks);
              });  */
      }

      addTask(event : any){

           var tasks = {
               fname   : this.fname,
               lname   : this.lname,
               age     : this.age,
               address : this.address,
               city    : this.city
           }

           console.log(event , tasks);
           //console.log(this.userForm.value);
               this.charityService.addTask(tasks).subscribe(data => {
                   console.log('Successful')
               })
       }
}

app.services.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class CharityService {

    constructor(private http: Http) {} 


    addTask(tasks){
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.post('http://localhost:4200/addTask', JSON.stringify(tasks), { headers: headers })
        .map(res => res.json());
    }
}

api.js

var express = require('express');
var router = express.Router();

var task = require('../models/model')
//var Model = require('../models/model.js');

router.post('/addTask', function(request, response) {
    var task = new Model(request.body);
    task.save(function(err, resource) {
        if (err) {
            response.send(err).status(501);
        } else {
            response.json(resource).status(201);
        }
    });
}); 


module.exports = router;

model.js

var mysql = require('mysql');
/* var Schema= mysql.Schema;

var CharitySchema = new Schema({
    fname   : String,
    lname   : String,
    age     : String,
    address : String,
    city    : String
});

var Model = mysql.Model('task',CharitySchema);

module.exports = Model; */

var connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : '',
    database : 'charity_project'
  });

  connection.connect(function(err){
    if(!err) {
        console.log("Database is connected ... nn");    
    } else {
        console.log("Error connecting database ... nn");    
    }
});

module.exports.addTask = function(tasks, callback) {
    connection.query("INSERT INTO registration SET ?", tasks, callback);
}

app.component.html

<div class="container">
  <h2 align="center"><u>Registration Form</u></h2> 


<br>
<div class="container">
    <form class="form-horizontal" #userForm="ngForm" (ngSubmit)="addTask($event)" >

        <div class="form-group">
            <label class="control-label col-sm-2" for="firstName">First Name:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" [(ngModel)]='fname' name="fname"  required>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="lastName">Last Name:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" [(ngModel)]='lname' name="lname"  required>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="age">Age:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" [(ngModel)]='age' name="age"  required>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="address">Address:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" [(ngModel)]='address' name="address"  required>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="city">City:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" [(ngModel)]='city' name="city"  required>
            </div>
        </div>

           <br>
           <div class="form-group">        
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
        </form>
</div>

server.js

var express    = require('express');
var morgan     = require('morgan');
var bodyParser = require('body-parser');
var mysql      = require('mysql');
var path       = require('path');

var mainRouter = require('./routes/index');
var apiRouter = require('./routes/api');


var app = express();
app.use(morgan('dev'));






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

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

app.use('/', mainRouter);
app.use('/api', apiRouter);


port = process.env.PORT || 4200;

app.listen(port, function() {
    console.log("listening to port " + port);
})

没有部署错误。但是在这里，当我输入数据时，它会打印在控制台上。但是它不会直接指向数据库。它显示http：// localhost：4200 / addTask 404（未找到）。它还显示core.es5.js：1020错误响应{_body：“↵↵↵无法发布/addTask↵↵↵”，状态：404，确定：false，statusText：“未找到”，标头：标头，…}