Install Node & the Angular CLI

Maximilian Schwarzmüller
A free video tutorial from Maximilian Schwarzmüller
Professional Web Developer and Instructor
4.7 instructor rating • 36 courses • 1,401,711 students

Lecture description

Let's get started and let's install the core tools we need to build MEAN applications!

Learn more from the full course

Angular & NodeJS - The MEAN Stack Guide [2021 Edition]

Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application

12:41:07 of on-demand video • Updated March 2021

  • Build real Angular + NodeJS applications
  • Understand how Angular works and how it interacts with Backends
  • Connect any Angular Frontend with a NodeJS Backend
  • Use MongoDB with Mongoose to interact with Data on the Backend
  • Use ExpressJS as a NodeJS Framework
  • Provide a great user experience by using Optimistic Updating on the Frontend
  • Improve any Angular (+ NodeJS) application by adding Error Handling
English So for this course, we will need a couple of tools and we'll install and add them step-by-step, for example MongoDB will be added a bit later, what we'll definitely need is NodeJS. For one because we will write and run NodeJS code, our server-side logic but also because even Angular needs it, even if we were not to create our own Node app, not because Angular uses NodeJS language features but because Angular actually is a framework that has a more complex build workflow, so the part where we take our source code as we write it as a developer and transform it into code that runs fine in the browser. That's is a bit more complex with Angular, because Angular for one uses Typescript, a superset to JavaScript, so a different language that's heavily based on JavaScript and, that's important, that does not run in the browser and to make it run, we need to compile it and that will be done for us, no worries but that task runner doing the compilation in the end is NodeJS, for example. So this will run all throughout the development process, we won't need to write any code for that but this is some stuff that happens behind the scenes and not just the Typescript to JavaScript compilation, the Angular code itself needs to be bundled and optimized and we need to reduce the code size by stripping out unused code and minifying it and all these are tasks handled by NodeJS on our machine whilst we are developing the application or when we are finishing it up basically and NodeJS will be used for that too. So we need it for these two reasons. For the NodeJS code that we write for our back-end and for the Angular build workflow and to learn more about Angular and the Angular workflow and how it works, definitely check out a course dedicated to Angular, because whilst I will cover some Angular basics in this course, in general, I do expect you to know the very basics about Angular. This is not a course for you if you've never touched Angular before. So with that out of the way, download NodeJS from nodejs.org and there pick the latest version, 10.1 in my case. If you are facing issues with that, fall back to the older version but in general, it's recommended to use 10.1 or whatever the latest version is when you're viewing this. Simply click on this and it will download an installer through which you can walk, it's available for both Mac OS and Windows and also Linux and it should automatically give you the right download there. Once you've successfully installed it through the installer, we can think about setting up an Angular application because this is actually what we'll start with in this course. For that, we'll use another tool and that's the Angular CLI, CLI stands for Command Line Interface and it's the de-facto way of creating Angular apps because of the more complex build workflow I mentioned, we need a lot of tools that compile our code, optimize it and setting all of that up on our own is pretty cumbersome and error-prone, the CLI gives us a project setup where all of that is taken care of and where we can focus on writing our Angular code, our logic. The CLI is installed like this and it uses NPM, the Node Package Manager, to install the CLI tool globally on our machine with this first command here. NPM, the Node Package Manager, is installed together with NodeJS automatically, so if you installed NodeJS, you will have NPM. Now let's therefore now install the CLI, I've already got NodeJS installed, so I can just fast-forward to this step and to install the CLI, you should open your terminal or command prompt on your machine and then run npm, this Node Package Manager which is available with NodeJS, install -g for globally because we want to install that Angular CLI globally on our machine so that we can use it from anywhere on our machine and then the name of that CLI package is @angular/cli and make sure not to mistype this, the naming is important. You can add an @latest to absolutely fetch the latest version, but it should give you that by default give you that version. Now on Windows, this command should be fine like this. On Mac and Linux, you might need to add a sudo in front of this to get the right permissions to execute this command. Hit enter thereafter and enter your password if you are prompted for it and thereafter it will then download the CLI package from NPM's repository and install it on your machine, this can take a couple of seconds up to minutes and I'll be back once it's done. So it's done installing and in my case, I've got some errors in between but that's no problem as long as it finishes with some output where it mentions the package name and version and says updated or added 8 or the number can actually differ, packages. So if you see something like that, it succeeded, you may ignore any errors that happened in between, it was able to recover from these. Now once this is installed, we can create a new Angular project with the CLI and we'll add Node and Mongo and Express to that project setup throughout the course but let's start with the front-end because that is how we can quickly see something on the screen. So let's create a new project and for that, navigate into the folder where you want to create the project. Once you're in that folder and you can get there with the cd command on your machine, create a new project with ngNew, that is a command now available due to that CLI package, ng is basically a command made available by that and then the name of the project and I will name it mean-course but of course you can pick any name you want. Just make sure it's not starting with a number and it's not named test, that is forbidden but anything else is fine, mean-course should work and once you hit enter, it will set up that project. It will create a lot of files in there, most of them are configuration files for that workflow, we don't need to worry about them and it will also give us a little dummy app with which we can start. It will also install all the dependencies, like the Angular framework and other dependencies that framework depends on but also a couple of build or workflow dependencies, so dependencies that compile the Typescript code, dependencies that optimize the code, things like that. So this can take a while and I'll be back once it's done. Now once it is done, you can navigate into that newly-created folder with cd and then the name of that folder and in there, simply run ngServe to bring up a development-only server and this is not a server you will use to deploy it, I will show you how to deploy that app towards the end of the course. This is a development-only server that allows you to preview your application. Double-clicking on the index.html file won't work because that will use the file protocol and not the HTTP protocol and therefore many features we need are not enabled and this gives us a real web server running on our machine at this address you see here, http://localhost:4200 by default and you can then go to a browser and simply visit localhost:4200 And on that URL, you should see something like this, some dummy starting page the CLI gives you by default. Now with that set up, we of course want to work on our code and for that, we need some IDE or some advanced text editor that makes that easier. Now you can use any IDE you want, like Sublime, Atom, WebStorm, in this course I will use Visual Studio Code. Now let's set it up and open our project in the next lecture.