cliveharber / gettingmean-2 Goto Github PK

Hello,
When I am running this API it shows the following error
http://localhost:3000/api/locations?lng=-0.9690884&lat=51.455041&maxDistance=20000

"$geoNear no longer supports the 'limit' parameter. Use a $limit stage instead."
it worked like a charm as soon as removed the limit from the const geoOptions.

I tried to run chapter-10 with docker. But it is giving following error:-
disconnected error: MongoNetworkError: failed to connect to server [database:27017] on first connect [MongoNetworkError: getaddrinfo ENOTFOUND database database:27017] (node:17) UnhandledPromiseRejectionWarning: MongoNetworkError: failed to connect to server [database:27017] on first connect [MongoNetworkError: getaddrinfo ENOTFOUND database database:27017] at Pool.<anonymous> (/usr/src/app/node_modules/mongodb-core/lib/topologies/server.js:431:11) at Pool.emit (events.js:182:13) at connect (/usr/src/app/node_modules/mongodb-core/lib/connection/pool.js:557:14) at makeConnection (/usr/src/app/node_modules/mongodb-core/lib/connection/connect.js:39:11) at callback (/usr/src/app/node_modules/mongodb-core/lib/connection/connect.js:261:5) at Socket.err (/usr/src/app/node_modules/mongodb-core/lib/connection/connect.js:286:7) at Object.onceWrapper (events.js:273:13) at Socket.emit (events.js:182:13) at emitErrorNT (internal/streams/destroy.js:82:8) at emitErrorAndCloseNT (internal/streams/destroy.js:50:3) at process.internalTickCallback (internal/process/next_tick.js:72:19) (node:17) 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:17) [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.

Kindly help where we need to change it.

I am getting this error on rebuilding
"main.f1591746b38f1c40b495.js:1 Uncaught Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document."

If I add base(href='/') to layout.pug

Then I am getting "The selector "app-framework" did not match any elementsat t.selectRootElement "
What should I do next ?

I've been reading chapter 8. After cloning the code and checkout into branch of chapter-08, there is only a piece of code in the book. Some file like app.component.ts, app.component.html can't be found.

I found another repository getting-MEAN-2, The code in this repo are seems to be the same with the book.

Hi @cliveharber ,

When I am running localhost:3000 using docker it shows error "http://localhost:3000/build/runtime.ec2944dd8b20ec099bf3.js net::ERR_ABORTED 404 (Not Found)" in console.

localhost:4200 Angular Works Fine

what should I do ??

Thanks

I recently bought the book “Getting MEAN WITH MONGO, EXPRESS, ANGULAR, AND NODE (second edition)”
In chapter 3.5 (Making it live on Heroku) makes it possible to deploy the website to a live production server on/at Heroku.
In $ 3.5.1. it is said that “Before you can use Heroku, you need to sign up for a free account and install the Heroku CLI on your development machine.”.

How ever: as of 22th november 2022, it is not possible to sign up for a free account.
Is it possible that you inform me about another PaaS provider, and give me instructions (i am a newbie 😊) how to make things work?
It would be great if the authors make an addendum for the parts of the book which refer to Heroku.

Can you help me?
Thanks in advance

Mark Gerrits

In the book, it is not stated how we can manually create a new

location.

Now, am creating a forum app(just for testing) where before users can comment, a user must start a thread.
Am having trouble creating it the script but this is have been able to do

I have these codes in

posts.js

file which is located in

app_api/controllers folder

const getAuthor = (req, res, callback) => {
  if (req.payload && req.payload.email) {
    User
      .findOne({ email: req.payload.email })
      .exec((err, user) => {
        if (!user) {
          return res
            .status(404)
            .json({ "message": "User not found" });
        } else if (err) {
          console.log(err);
          return res
            .status(404)
            .json(err);
        }
        callback(req, res, user.last_name);
      });
  } else {
    return res
      .status(404)
      .json({ "message": "User not found" });
  }
};

const doAddPost = (req, res, post, author) => {

  const { postText, title } = req.body;
  post.posts.push({
    author,
    postText,
    title
  });
  post.save((err, post) => {
    if (err) {
      res
        .status(400)
        .json(err);
    } else {
      //updateAverageRating(post._id);
      const thisPost = post.posts.slice(-1).pop();
      res
        .status(201)
        .json(thisPost);
    }
  });
};

const postsCreate = (req, res) => {
  getAuthor(req, res,
    (req, res, username) => {
      if (req) {
        doAddPost(req, res, post);
      } else {
        res
          .status(404)
          .json({ "message": "Post not created" });
      }
    });
}; 

Then in index.js file of app_api/route folder, I have this
router.post('/post/create', auth, ctrlPosts.postsList);

Meanwhile, in app_public folder(which as you know hold the angular side).

These codes reside in the homelist.component.ts

@Input() post: Post;

  public newPost: Post = {
    postText: '',
    user: '',
    title: ''
  };

  public formVisible: boolean = false;
  public formError: string;

private formIsValid(): boolean {
    if (this.newPost.postText && this.newPost.title) {
      return true;
    } else {
      return false;
    }
  }

  `// The error is inside the promise here`
  public onPostSubmit(): void {
    this.formError = '';
    this.newPost.user = this.getUsername();
    if (this.formIsValid()) {
      this.dayoDataService.addPost(this.post, this.newPost)
        .then((post: Post) => {
          console.log('Post saved', post);
          let posts = this.post.slice(0);
          posts.unshift(post);
          this.post = posts;
          this.resetAndHidePostForm();
          this.router.navigateByUrl('/');
        });
    } else {
      this.formError = 'All fields requried, please try again';
    }
  }

  private resetAndHidePostForm(): void {
    this.formVisible = false;
    //this.newPost.author = '';
    //this.newPost.rating = 5;
    this.newPost.postText = '';
    this.newPost.title = '';
  }
  
  public isLoggedIn(): boolean {
    return this.authenticationService.isLoggedIn();
  }

  public getUsername(): string {
    const { last_name } = this.authenticationService.getCurrentUser();
    return last_name ? last_name : 'Guest';
  }

Note: I only posted the neccessary code here as I believe you will understand
while I have this in

homelist.component.html

<div class="row">
  <div class="col-12">
    <div class="card card-primary review-card">
      <div class="card-block" [ngSwitch]="isLoggedIn()">
        <button (click)="formVisible=true" class="btn btn-primary float-right" *ngSwitchCase="true">Add post</button>
        <a routerLink="/login" class="btn btn-primary float-right" *ngSwitchDefault>Log in to add post</a>
        <div *ngIf="formVisible">
          <form (ngSubmit)="onPostSubmit()">
            <hr>
            <h4>Start a new thread</h4>
            <div *ngIf="formError" class="alert alert-danger" role="alert">
              {{ formError }}
            </div>
            <div class="form-group row">
              <label for="name">Title</label>
              <input class="form-control" id="title" name="title" placeholder="Enter your first name" [(ngModel)]="newPost.title">
            </div>
            <div class="form-group row">
              <label for="review" class="col-sm-2 col-form-label">Post</label>
              <div class="col-sm-10">
                <textarea [(ngModel)]="newPost.postText" name="post" id="post" rows="5" class="form-control"></textarea>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-12">
                <button type="submit" class="btn btn-primary float-right" style="margin-left:15px">Submit post</button>
                <button (click)="formVisible=false" type="button" class="btn btn-default float-right">Cancel</button>
              </div>
            </div>
            <hr>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

This is what I have so far but am loss on how to complete it.

I would be grateful if you can help me out.
Also, I eagerly await your response

I tried to pass the comment._id in an hidden form manually to be used for adding likes to a comment but it's not working. This is what I have done so far

<div *ngFor="let comment of post.comments | mostRecentFirst" class="row review">
          <div class="col-12 no-gutters review-header">
            <div class="col-12">
              <p [innerHTML]="comment.commentContent | htmlLineBreaks"></p>
              <p [innerHTML]="comment.voteUp"> likes</p>
              <p [innerHTML]="comment.voteDown"></p>
            </div>
            <form (ngSubmit)="onCommentVoteUpSubmit()">
              <hr>
                <div class="col-12">
                  <input type="input" hidden="true" class="form-control" id="id" name="id" [(ngModel)]="newComment._id" value="{{ comment._id }}">
                  <button type="submit" class="btn btn-primary float-right" style="margin-left:15px">Vote up</button>
                </div>
            </form>
            <small class="reviewTimestamp">{{ comment.createdOn | date : 'd MMMM yyyy'}}</small>
          </div>
        </div>

When I to console.log it, it returns Undefined

This is what I have in

post-details.component.ts

public onCommentVoteUpSubmit(): void {
    console.log(id);
    this.nodeCommDataService
      .addVoteUpComment(this.post._id, this.newComment)
      .then((comment: Comment) => {
        let comments = this.post.comments.slice(0);
        comments.unshift(comment);
        this.post.comments = comments;
      });
  }

and this is newComment

public newComment: Comment = {
    _id: '',
    user: '',
    commentContent: '',
    voteDown: 0,
    voteUp: 0
  };

What am I missing?

In the map gettingMean-2\my app_ap1\db.js file i have this line of code

let dbURL = 'mongodb://127.0.0.1:27017/Loc8r';

This is shown in my Terminal (Visual Code)

the dbURL (variabele MongoDBLink) = mongodb://127.0.0.1:27017/Loc8r
Status: connected to: mongodb://127.0.0.1:27017/Loc8r
GET /api/locations?lng=-0.7992599&lat=51.378091&maxDistance=20 200 25.701 ms - 360
GET / 200 290.891 ms - 2110
GET /stylesheets/all.min.css 304 4.611 ms - -
GET /stylesheets/style.css 304 6.012 ms - -
GET /javascripts/bootstrap.min.js 304 3.355 ms - -
GET /javascripts/validation.js 304 3.811 ms - -
GET /stylesheets/bootstrap.min.css 200 10.485 ms - 140382
GET /build/polyfills.d1c7bf4a2ae7c3435f95.js 304 8.408 ms - -
GET /build/runtime.ec2944dd8b20ec099bf3.js 304 7.213 ms - -
GET /build/main.75f3d5241e7dc03e8f49.js 304 7.359 ms - -
GET /api/locations?lng=-0.7992599&lat=51.378091&maxDistance=20000 200 3.895 ms - 360
GET /about/ 200 37.011 ms - 2045
GET /stylesheets/bootstrap.min.css 304 1.621 ms - -
GET /stylesheets/all.min.css 304 3.825 ms - -
GET /stylesheets/style.css 304 3.385 ms - -
GET /javascripts/bootstrap.min.js 304 3.805 ms - -
GET /javascripts/validation.js 304 4.163 ms - -
GET /api/locations?lng=-0.7992599&lat=51.378091&maxDistance=20 200 7.478 ms - 360
GET / 304 44.533 ms - -
GET /stylesheets/bootstrap.min.css 304 2.085 ms - -
GET /stylesheets/all.min.css 304 2.487 ms - -
GET /stylesheets/style.css 304 3.672 ms - -
GET /javascripts/bootstrap.min.js 304 2.561 ms - -
GET /javascripts/validation.js 304 2.909 ms - -
GET /build/runtime.ec2944dd8b20ec099bf3.js 304 5.316 ms - -
GET /build/main.75f3d5241e7dc03e8f49.js 304 5.637 ms - -
GET /build/polyfills.d1c7bf4a2ae7c3435f95.js 304 5.077 ms - -
GET /api/locations?lng=-0.7992599&lat=51.378091&maxDistance=20000 304 5.752 ms - -

So it seems i have a connection with my local MongoDB database Loc8r

This is shown my browser: 2 locations

But if i open MongoDB Compass, and use this connection string: mongodb://localhost:27017
Then Go to Loc8r and select locations > in my local mongoDB / Loc8r , 3 locations are shown

My Question: why do not all 3 locations show in my application/webbrowser?

Hey Clive, I'm looking at the page I've copied below.

--

The database connection for your application is held in the db.js file in app_
server/models. The connection portion of this file currently looks like this:

const dbURI = 'mongodb://localhost/Loc8r';
mongoose.connect(dbURI);

Changing the value of dbURI based on the current environment is as simple as using an if statement to check NODE_ENV. The next code snippet shows how you can do this to pass in your live MongoDB connection. Remember to use your own MongoDB connection string rather than the one in this example:

let dbURI = 'mongodb://localhost/Loc8r';
if (process.env.NODE_ENV === 'production') {
dbURI =
'mongodb://heroku_t0zs37gc:[email protected]:5933
➥ 0/ heroku_t0zs37gc';
}
mongoose.connect(dbURI);

--
This is confusing me, because the code in the chapter-05 branch of db.js looks different:

const mongoose = require('mongoose');
const host = process.env.DB_HOST || '127.0.0.1'
const dbURL = `mongodb://${host}/Loc8r`;
const readLine = require('readline');

const connect = () => {
  setTimeout(() => mongoose.connect(dbURL, { useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true}), 1000);
}

Which one am I supposed to go off of? When I run heroku logs after creating a heroku app with MLab and pushing chapter-05 to it, I receive the following error message:

2020-08-03T20:31:05.681419+00:00 app[web.1]: name: 'MongoNetworkError',
2020-08-03T20:31:05.681419+00:00 app[web.1]: errorLabels: [Array],
2020-08-03T20:31:05.681420+00:00 app[web.1]: [Symbol(mongoErrorContextSymbol)]: {}
2020-08-03T20:31:05.681420+00:00 app[web.1]: }]
2020-08-03T20:31:05.681757+00:00 app[web.1]: (node:23) UnhandledPromiseRejectionWarning: MongoNetworkError: failed to connect to server [127.0.0.1:27017] on first connect [Error: connect ECONNREFUSED 127.0.0.1:27017

I am running Linux Mint.

Hi @cliveharber ,

When I added responseBody to the renderHomepage constant in section 7.2.3, I get the following TypeError. It was working perfect with the hard coded data, but when I call the API is throws this error. I don't think it's the location-list pug file, so I checked the schema to see if there were errors there, but it looks fine. Any thoughts on where I should check next?

TypeError: C:\Users\Jon\Documents\Loc8r\app_server\views\locations-list.pug:24
    22|             p.address= location.address
    23|             .facilities
  > 24|               each facility in location.facilities
    25|                 span.badge.badge-warning= facility
    26|     .col-12.col-md-4
    27|       p.lead= sidebar