Cannot read property 'success' of null on angular 6

Question

i keep getting this error on angular 6 have codes the backend now on connecting on registering the user he should be directed to the admin dashboard unfortunately am getting that caoont be read the property of success is null while when i use another route the pop up window tells me undefined hellp me guys am to submit this assignment on Wednesday am newbie from tanzania

core.js:6014 ERROR TypeError: Cannot read property 'success' of null
    at SafeSubscriber._next (login.component.ts:26)

Show 40 more framesHere is my login.components.ts```

Here is my login.components

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private Auth: AuthService,private router: Router) { }

  ngOnInit() {
  }
  loginUser(event)
  {
    event.preventDefault()
    const target = event.target
    const email= target.querySelector('#email').value
    const password = target.querySelector('#password').value


    this.Auth.loginUser(email, password).subscribe(data => {
      if(data.success)
      {
        //redirect the person to admin page
        this.router.navigate(['admindashboard'])
        this.Auth.setLoggedIn(true)


      }
      else
      {
        window.alert(data.message)
      }
      return false;
    });
    console.log(email, password)
  }

}```

here is my auth.service.ts

import { Injectable } from '@angular/core';
import{ HttpClient } from '@angular/common/http';

interface myData
{
  success:boolean,
  message: string
}

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  uri ='http://localhost:4000';

  private loggedInStatus = false
  constructor(private http: HttpClient) { }

  setLoggedIn(value: boolean)
  {
  this.loggedInStatus = value
  }

  get isLoggedIn()
  {
    return this.loggedInStatus
  }


  loginUser(email,password){
    return this.http.post<myData>(`${this.uri}/register`, {
      email,
      password
    });
  }


}```

Here is my Api

``` server.post('/register', (req, res, next) => {


     const { email, password } = req.body;

     const clearadmin = new Clearadmin({
         email,
         password
     });

     bcrypt.genSalt(10, (err, salt) => {

        bcrypt.hash(clearadmin.password, salt, async (err, hash) => {

            //Hash Password
            clearadmin.password = hash;

            //save clearadmin
            try{
               const newClearadmin = await clearadmin.save();
               res.send(201);
               next();
            }
            catch(err)
            {
             return next(new errors.InternalError(err.message));
            }
        });
     });
    });```

My ClearAdmin Mongoose Schema

const ClearAdminSchema = new mongoose.Schema({
    email:
    {
        type:String,
        required:true,
        trim:true
    },
    password:{
        type:String,
        required:true
    }
});

const ClearAdmin = mongoose.model('ClearAdmin', ClearAdminSchema);
module.exports = ClearAdmin;```

    *the new Error am getting n my console now*

    ```Server started on port 4000
    (node:921) UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot render headers after they are sent to the client
        at ServerResponse.writeHead (_http_server.js:236:13)
        at ServerResponse.restifyWriteHead [as writeHead] (/Users/retina/ocapp/node_modules/restify/lib/response.js:632:25)
        at flush (/Users/retina/ocapp/node_modules/restify/lib/response.js:849:9)
        at ServerResponse.__send (/Users/retina/ocapp/node_modules/restify/lib/response.js:431:24)
        at ServerResponse.send (/Users/retina/ocapp/node_modules/restify/lib/response.js:316:21)
        at bcrypt.hash (/Users/retina/ocapp/routes/clearadmins.js:42:21)
        at process._tickCallback (internal/process/next_tick.js:68:7)
    (node:921) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
    (node:921) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.```

Answer 1

Firstly, you are not sending the user credentials the right way, email & password should be sent as a key-value JSON object in your service auth.service.ts. like this

loginUser(email,password){
    return this.http.post<myData>(`${this.uri}/register`, {
      email:email,
      password:password
    });
  }

Next, In your component login.component.ts you are trying to read the success property, while in your API, your response does not contain this property. Your API response should look like this.

res.status(201).json({
                        success:true,
                        msg:'registration successful'
                    })

And, In your API, I would suggest you to read the email & password in this way

const email = req.body.email;
const password = req.body.password;

Replace this

const clearadmin = new Clearadmin({
         email,
         password
     });

With this

const clearadmin = new Clearadmin({
         email:email,
         password:password
     });

Add the save method to your mongoose model, like this

const ClearAdminSchema = new mongoose.Schema({
    email:
    {
        type:String,
        required:true,
        trim:true
    },
    password:{
        type:String,
        required:true
    }
});

const ClearAdmin = modules.exports = mongoose.model('ClearAdmin', ClearAdminSchema);
//Save the user
module.exports.saveUser = function(newUser, callback){
    newUser.save(callback);
}

Now, make changes to your register route

server.post('/register', (req, res, next) => {

     const email = req.body.email;
     const password = req.body.password;

     const clearadmin = new Clearadmin({
         email:email,
         password:password
     });

     bcrypt.genSalt(10, (err, salt) => {

        bcrypt.hash(clearadmin.password, salt, async (err, hash) => {

            //Hash Password
            clearadmin.password = hash;

            //save clearadmin
            Clearadmin.saveUser(clearadmin,(err,registered)=>{
              if(err){
                  res.json({success:false, msg:'Error occurred at backend'})
              }if(registered){
                  res.json({success:true, msg:'user registered'})
              }
            })
        });
     });
    });