Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Greg Schudel
4,090 PointsAngular - COMPLETELY LOST
Not sure where to begin.
DONE CORRECTLY:
I downloaded Xcode for my Mac OSX computer ().
I downloaded npm and node. Done.
I downloaded Angular globally. Done.
I downloaded CoffeeScript globally. Done.
ERRORS IN USING VISUAL STUDIO:
I could not download a Visual Studio to my Macbook pro. Got an "Andriod SDK download" error
DONE CORRECTLY:
Through my terminal on my macbook, I created a new app named "photoblog". Done.
I downloaded CoffeeScript a plugin to my Sublime Text Editor. Done.
I downloaded npm for this project (not sure why, but I did it via my terminal). Done.
I then created a server for my project via my terminal. Done.
CONFUSED/QUESTIONS:
I have no www.root folder in the download from github. Why?
I am honestly not sure if my dependences are connected. Why are "dependencies" not explained in the course? (this I was forced to learn by reviewing other sites)
I get a page cannot be displayed error when I try to get to the page localhost:8080, why?
I have no idea how my files are being activated by the server, why is that not explained?
With this much confusion I am honestly considering trying to learn from another source. I KNOW this is hard to learn, but there are so many holes in what is NOT being explained I am honestly not sure if it's the material or how it's being presented.
Please assist in any way you can, I have NO PROBLEM admitting when I've done something dumb here.
SUGGESTIONS FOR OTHER RESOURCES: If necessary, could someone simply refer me to another resource where I am not forced to use Visual Studio? I have a Macbook Pro (OSX 10.11.6) with a paid version of Sublime Text 3. I don't mind using terminal if I have to.
4 Answers
Seth Kroger
56,413 PointsFirst you say you installed CoffeeScript, but this is wrong. Angular uses TypeScript.
Second, given the first, Visual Studio and Visual Studio Code are different products and it very much sounds like you downloaded the first, which is a full-blown IDE, and not the second which is a trimmed-down, lighter-weight code editor that Andrew uses in the videos. But Sublime should work just as well with a TypeScript plugin.
The downloaded files should what you need to start with. There won't be a wwwroot folder initially because you haven't npm run build to build it for you. Node based projects are reasonably self-contained. There is always a file called package.json that has a list of the libraries and tools the project uses among other things. Since the project needs these libraries and tools, it is the same as saying it depends on them and that is where the term dependencies come from. They need to be installed for the project, and that is what the running the command npm install in the project directory does (not installing npm again). It goes through the package.json file and installs all the packages listed in dependencies and devDependencies into the project in the node_modules folder. It should be the first command run whenever you download a project.
Once that goes through you should be able to run npm run serve and wait for the server to spin up and compile the project before viewing. If there are any problems in this step or the previous one there should be an error message in the terminal about it. Just leave the dev server running and it will detect when you save a file to automatically recompile/reload the page.
Greg Schudel
4,090 PointsOkay,
so three things.....
1.) after I download the files needed (place them anywhere on my desktop?), use npm run build in my console on my mac
2.) then, provided I have no errors, run npm install on my console.
How does the terminal know where to find the package.json file so it can find all those dependencies?
3.) then I find npm run serve and then wait for my server to engage and compile the project.
4.) Do I open the file using within the node_module folder? Where is that on my desktop? I can't find any folder named after the project that I created for this project "i.e. photoblog". I will need to know where the folder is so I can open that file in my editor, correct?
Seth Kroger
56,413 Points-
npm installalways comes before any other the others after downloading. Otherwise the needed tools and libraries aren't available. You'll always run it from inside the project directory. The same applies to the other commands as well. I.e.cd photoblogbefore running. It will create the node_modules folder there, and you simply don't need to touch it. -
npm run serveis what you'll be using while developing. You use it to preview the website as you go. -
npm run buildcomes when you're ready to make a production version for deployment.
Seth Kroger
56,413 Pointsnpm install looks for the package.json file in the current directory. In the command shell this is the directory path you see in the prompt. If you aren't there you need to use the cd command (for Change Directory) to move there. You project will be on that same path. On a Mac it should start with /home/[your username] which is where your personal files are.
Greg Schudel
4,090 Pointsnpm install always comes before any other the others after downloading. Otherwise the needed tools and libraries aren't available.
But this is where I'm getting so confused! How does it know where that file is through some generalized command like npm install?
Secondly, how do you open up the file that you edit in your editor? Where is the file on my machine after I have created it the project using the console?
Miguel López
7,055 PointsHi Greg. I think you started this course with wrong foot. And that's ok since we are here to help you. And yes, in this particular video Andrew covers a lot of concepts, is a very long vide and is overwhelming at least for me.
First, as Andrew said, using Angular, you will be using a lot of npm commands too. So i highly recommend to you to take the npm videos first, were you will be learning what is npm install command and were this command needs to be executed.
Long story short: If you want to follow along you will need to install node wich comes with npm (but i think you already know that).
Now, as you can see in the video, Andrew recommends to use Visual Studio Code as your editor but Sublime Text or Atom works fine too.
Now you can download the project files and unzip them wherever you want in your computer. Then you can open your terminal and then navigate (in your tereminal too) to the directory where the project files were unzipped and finally there you can type npm install.
And here is where you thinks: "How this simple command knows what to do?". Well, npm install tells npm to look for a package.json file (wich you can see right there in the project directory) and read the configuration that this files contains, wich is a list of the names and versions of the libraries that the project needs to be installed before you start coding... and ultimately, installs everything for you when you run this simple command.
After all of this you will be able to run the npm run servecommand in your terminal, then open your browser and go to http://localhost:8080 to see the project running wich to this point is just the loading... text.
Your question is a little bit old but i feel the need to answer since i know how you feel. I hope is not too late.
As my final comment here, apologize for my bad english.
yurienrico
184 PointsI got everything up and running with Sublime Text 3… only thing that's not working is the autocomplete;
- Typing in SB3: 'import {NgMod…' no pop-up box with Angular/Typescript suggestions appear.
- Typing in VSC: everything works fine. So for the time being i'm using VSC instead of SB, which is really weird after many years.
If anyone ran into the same autocomplete/intellisense issue and fixed it, let me know!
Michael Kalmykov
8,919 PointsMichael Kalmykov
8,919 PointsIt's not you, 80% of this vid is the guy either assuming you know every little thing or just skipping over the concepts that would turn this 14 min vid into a 3-hour course. Personally, I think this should be a 3-hour course where every fundamental angular concept is explained in depth, instead of sending you to some documentation page. This much more of a quick and dirty how-to video as opposed to an in-depth at the end you'll understand how angular works video.