Stalled when registering new user on mean stack [Unknown Error on Chrome Console]

Question

I've been following this tutorial (https://www.sitepoint.com/user-authentication-mean-stack/) and referencing the github linked (https://github.com/sitepoint-editors/MEAN-stack-authentication) to learn MEAN stack. I am using express on port 3000 and angular on port 4200 so I had to make a few changes to my client/src/app/authentication.service.ts file so that it tries to post at port 3000.

private request(method: 'post' | 'get', type: 'login' | 'register' | 'profile', user?: TokenPayload): Observable<any> {
    let base;

    if (method === 'post') {
      base = this.http.post("http://localhost:3000" + `/api/${type}`, user);
    } else {
      base = this.http.get("http://localhost:3000" + `/api/${type}`, { headers: { Authorization: `Bearer ${this.getToken()}` } });
    }

    const request = base.pipe(
      map((data: TokenResponse) => {
        if (data.token) {
          this.saveToken(data.token);
        }
        return data;
      })
    );

    return request;
  }

I was able to fix the CORS error with the cors package but now I check dev tools and it just shows "stalled" until I get an error.

No clue on what to do yet.

[1/29 UPDATE]

I've narrowed the connection error to a few lines of code but searching through my chrome dev console cannot seem to find an error that I know how to chase.

My form on register.component.html

  <form (submit)="register()">
  <div class="form-group">
    <label for="name">Full name</label>
    <input type="text" class="form-control" name="name" placeholder="Enter your name" [(ngModel)]="credentials.name">
  </div>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" name="email" placeholder="Enter email" [(ngModel)]="credentials.email">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="credentials.password">
  </div>
  <button type="submit" class="btn btn-default">Register!</button>
</form>

Form triggers register function in register.component.ts

export class RegisterComponent {
  credentials: TokenPayload = {
    email: '',
    name: '',
    password: ''
  };

  constructor(private auth: AuthenticationService, private router: Router) {}

  register() {
    this.auth.register(this.credentials).subscribe(() => {
      console.log("good");
      this.router.navigateByUrl('/profile');
    }, (err) => {
      console.error(err);
      console.error("there was an error trying to register user");
      console.error(this.credentials);
    });
  }
}

Console does not print "good", meaning that the connection stalls here

this.auth.register(this.credentials).subscribe(() => {

In the chrome dev console, I get "failed to load response data" under the preview and response tab.

TL;DR I have an error in my application and the chrome dev console error message prints "Http failure response for http://localhost:3000/api/register: 0 Unknown Error". Need to know how to find specific error.

Answer 1

After seeing that there wasn't any information loading from the backend of the app, I thought there might have been something up with my app.js file.

Placed my packages in this order and the request went through.

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(cors());

Still haven't seen the data saved in the database but that's another question for a different post.