Hi, for everyone who will have this kind of error in the future, one of the solution (like in mine case) could be this: In the video, Huston (the teacher) says to create "public" folder and then clone git repository in that public folder (with using dot at the end). By doing this, git clone also another "public" folder from the git repository which changes your app.use() path.

So instead of having this: app.use('/',express.static('public'));

YOU NEED TO USE THIS LINE OF CODE: app.use('/',express.static('public/public/'));

Plus, if you cloned git repository without . (dot) at the end of a command then your line of code would look something like this: app.use('/',express.static('public/angular-basics/public/'));

Hope this helped you :)

Been a little while since you posted this question but if you haven't yet solved it or for anyone else who runs into this issue I think the problem comes from cloning the wrong directory. If you cloned the entire angular todo repo like I did the express static function will try to serve the public folder but the angular app is one level deeper. Just change the express static function to the following and it should work.

app.use('/', express.static('public/angular-basics'));

I don't know if this will help anyone else or not, but i was having the same problem & couldn't figure it out from watching the video again or based on the comments here. My directories seemed to be set up correctly but i was still getting CANNOT GET when running the app in my browser.

I removed the first parameter - the '/' - in the app.use(); method, then stopped my server & restarted it, refreshed the browser & i'm good to go.

So it ended up looking like app.use(express.static('public'));

Hope that helps someone :)

Hi All,

If you performed the same exact steps as Huston does in the video, just as I did, I found that running this expression...

app.use('/', express.static('../public/')); (as opposed to app.use('/', express.static('public'));)

...does the trick. I believe David Bath was correct by saying the folder structure was off.

Best, Matthew Huntely

I thought I had the same problem. I read through everyone's comments and the directions again, and realized that I was trying to fork the Building a MEAN Application repo and clone that fork into the mean-todo project I was creating along with the video.

In reality, I think they want you to first fork the MEAN repo, clone your own fork of the MEAN repo, and run

git checkout tags/s1v3 -b setting-up-an-express-application

This means you'd skip Huston's first few directions about creating your own mean-todo directory. Then, when the times comes in the video, you clone the angular-basics repo into the public folder you created for your mean-todo clone.

Bill Shannon's answer in the other, related thread clued me in as to what I was doing wrong.

My router and Angular app wasn't working. I didn't something silly and hope by sharing, I can save someone else from repeating the same mistake.

The first thing is Huston has 2 repos and that kind of caused mild confusion. He has the completed app in one repo and the Angular app in another repo. The instructions on the page tell you to fork and clone the complete repo but those instructions do not coincide with Huston's step by step.

I followed Huston's instructions and created all the folders and when I came to clone the Angular app, I made sure I was inside the public directory and cloned this repo.

$ git clone https://github.com/treehouse/angular-basics.git .

My silly mistake was forgetting that ending dot . So by forgetting that dot, I accidentally placed created a folder called 'angular-basics' inside my public folder and that extra folder is what broker my route.

I just delete that folder

$ rm -rf angular-basics

And re-cloned it the proper way (while inside the public folder)

$ git clone https://github.com/treehouse/angular-basics.git .

Don't forget the dot! lol

I think the problem might have to do with a path. In that dir structure screenshot your app.js file is in the src folder, but the public folder is up one level from there. The app.use statement can't see it.

Can you share what is in your index.html file, as well as the contents of the public/scripts directory?

Also, you can use syntax highlighted code blocks as described in the Markdown Cheatsheet (linked below the question/answer/comment box) to make it a bit easier to read on the forums.

It sounds like an issue with Express serving the contents of your public folder though, because otherwise it would load that public/index.html file, and only then would you potentially have an issue with Angular.

Don't confuse src/app.js (Express) with public/scripts/app.js (Angular). :)

I'm new to MEAN apps, but I suspect there might be more trouble down the road with paths if your folder structure doesn't match the instructor's. I think I've got mine sorted now, if this helps anyone:

inside the root folder .git .gitignore node_modules package.json public src

and inside the public folder README.md index.html mock scripts styles templates vendor

Instead of \mean-todo\src nodemon app.js that I used first time, I changed \mean-todo\ nodemon src/app.js. This schema worked, good luck !

Nice Karlo Vidaković, I had to use the same line

  app.use('/',express.static('public/public/'));

This is because the video Setting Up an Express Application actually tells us to git clone into a public folder, I don't know why and it needs correcting pretty sharpish, unless there was something I was missing!

There was also more I had to do to get this working.

I needed to run npm install within the downloaded repo in public...

So after adding the line above and in the command line in the root directory

  cd public
  npm install
  cd ../
  nodemon

Basically the repo they ask you to download you need to npm install as some of the modules are required in /public/src/app.js

Something else they don't tell you about, not sure if this is right or wrong but I had to do this to get the todo list app to run and actually work

1. Go back into your public folder and run webpack
2. cd ../ back
3. Add the following to src/app.js

  app.get('/api/todos', function(req, res) {
    res.json({todos: []});
  });

Yes this is in the next video but for some reason their code in the repo is looking for /api/todos so it needs to exist.

You will then have it all running but no data, however you can at least Add items to the list. So then you know it is actually working