Angular 6 + NodeJS + MongoDB - node.js

Question

Hello after searching here i was unable to find something. 2 similar questions hasn't been answered.
im new here sos if you can help with my final project or lead me to a fix i will be more then happy.
after runing ngForm im unable to post and recive the folowing error:
zone.js:2969 POST http://localhost:4200/signup 404 (Not Found)
core.js:1624 ERROR
My form sits inside other component and my routing looks like that:
{
path: 'signup',
component: SignUpComponent,
data: { title: 'signup' },
children: [
{path: '', component: RegistrationComponent},
{path: 'userSettings', component: UserSettingsComponent},
{path: 'userSettings/finish', component: FinishComponent},
]},
Registration.Component.html
<div class="panel panel-primary">
<div class="panel-heading">
{{ test }}
</div>
<div class="panel-body">
<form [formGroup]="angForm" novalidate>
<div class="form-group">
<label class="col-md-4">inputfirstname</label>
<input type="text" class="form-control" formControlName="inputfirstname" #inputfirstname />
</div>
<div *ngIf="angForm.controls['inputfirstname'].invalid && (angForm.controls['inputfirstname'].dirty || angForm.controls['inputfirstname'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['name'].errors.required">
Name is required.
</div>
</div>
<div class="form-group">
<label class="col-md-4">lastname</label>
<input type="text" class="form-control" formControlName="inputlastname" #inputlastname/>
</div>
<div *ngIf="angForm.controls['inputlastname'].invalid && (angForm.controls['inputlastname'].dirty || angForm.controls['inputlastname'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['inputlastname'].errors.required">
LastName is required.
</div>
</div>
<div class="form-group">
<label class="col-md-4">inputEmail</label>
<input type="text" class="form-control" formControlName="inputEmail" #inputEmail/>
</div>
<div *ngIf="angForm.controls['inputEmail'].invalid && (angForm.controls['inputEmail'].dirty || angForm.controls['inputEmail'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['inputEmail'].errors.required">
inputEmail is required.
</div>
</div>
<div class="form-group">
<label class="col-md-4">inputPassword</label>
<input type="text" class="form-control" formControlName="inputPassword" #inputPassword/>
</div>
<div *ngIf="angForm.controls['inputPassword'].invalid && (angForm.controls['inputPassword'].dirty || angForm.controls['inputPassword'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['inputPassword'].errors.required">
inputPassword is required.
</div>
</div>
<div class="form-group">
<label class="col-md-4">confirmPassword</label>
<input type="text" class="form-control" formControlName="confirmPassword" #confirmPassword/>
</div>
<div *ngIf="angForm.controls['confirmPassword'].invalid && (angForm.controls['confirmPassword'].dirty || angForm.controls['confirmPassword'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['confirmPassword'].errors.required">
confirmPassword is required.
</div>
</div>
<div class="form-group">
<button (click)="addUser(inputfirstname.value, inputlastname.value,inputEmail.value,inputPassword.value,confirmPassword.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>
</div>
</form>
</div>
Registration.component.js
import { Component, OnInit, NgModule } from '#angular/core';
import { FormGroup, FormBuilder, Validators } from '#angular/forms';
//import users class
import {UserService} from './../../user.service'
#Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
angForm: FormGroup;
constructor(private userservice: UserService, private fb: FormBuilder) {
this.createForm();
}
//user form
createForm() {
this.angForm = this.fb.group({
inputfirstname: ['', Validators.required ],
inputlastname: ['', Validators.required ],
inputEmail: ['', Validators.required ],
inputPassword: ['', Validators.required ],
confirmPassword: ['', Validators.required ]
});
}
addUser(inputfirstname, inputlastname, inputEmail, inputPassword, confirmPassword ) {
this.userservice.addUser(inputfirstname, inputlastname, inputEmail, inputPassword, confirmPassword);
}
ngOnInit() {
// //Create a new user object
// this.user = new user({
// firstname:"",lastname:"",email:"", password: { pwd: "" , confirm_pwd: ""}, terms:false})
}
}
user.service.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { FormGroup, FormBuilder, Validators } from '#angular/forms';
#Injectable()
export class UserService {
constructor(private http: HttpClient) { }
addUser(inputfirstname, inputlastname, inputEmail, inputPassword, confirmPassword) {
const uri = 'http://localhost:4200/signup';
const obj = {
inputfirstname: inputfirstname,
inputlastname: inputlastname,
inputEmail: inputEmail,
inputPassword: inputPassword,
confirmPassword: confirmPassword
};
this.http.post(uri, obj)
.subscribe(res => console.log('Done'));
}
}
singup.js on server side
var express = require('express');
//var router = express.Router();
var router =express();
var registrationSchema = require('../models/Registration.js');
/* GET users listing. */
// router.get('/', function(req, res, next) {
// console.log(registrat);
// });
// Defined store route
router.route('/next').post (function(req,res){
var registerData = new registrationSchema(req.body);
registerData.save().then(item=>{
res.status(200).json({'registerData': 'data added successfully'});
})
.catch(err => {
res.status(400).send("unable to save to database");
});
})
// Defined get data(index or listing) route
router.route('/').get(function (req, res) {
console.log(req.body);
registrationSchema.find(function (err, data){
if(err){
console.log(err);
}
else {
res.json(data);
}
});
});
//registration
router.route('/signup').post (async function (req, res) {
//to add validation?
//create new user
var newUser = new registrationSchema(req.body);
console.log('req.body');
var isCreated = await registrationSchema.inputData(newUser).then(result =>{
if (result)
{
console.log(isCreated);
res.status(200).send({success:true,message:"User Created!"})
}
else
console.log(err);
})
})
//login
router.route('/login'), async function (req, res){
}
module.exports = router;
i would like to hear your idea. allready tested the form at root and changing paths. i recive same errors.
last try was to create a form using different way. and again nothing.
thank you for your time,
Best regards!

Answer 1

addUser(inputfirstname, inputlastname, inputEmail, inputPassword, confirmPassword) {
const uri = 'http://localhost:4200/signup';
uri belongs to the server! i mixed up the idea. need to be the server ip + port + callout router from server.
and the submision is wrong. had to restudy the http docs.