In this tutorial i will explain how to setup angular 6 with node.js and specifically to use the Angular cli – a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. Firstly we need to install node.js. Node.js is a runtime environment that comes with npm (node package manager). Npm manages the different dependencies an Angular project has. The below article will explain step by step the whole procedure.
Download and install Node.js
The very first step, if you haven’t already done before, is to download and install node.js on your computer. You can download the latest version from node.js official website. Once you have installed it, you will be able to run npm commands directly from command prompt to install Angular cli packages
Downloading Angular CLI from the command prompt and setting up the app
You should now be able to use those commands to install angular on your desired location. You can find the commands here. If you are a Windows user you can simply open the command prompt as an administrator or terminal if you are using Mac. Now you should run the following commands, shown in red colors, to download Angular CLI packages, setup the application folder in your desired location, and lastly to bring up a development server to see your application in the browser.
npm install -g @angular/[email protected]
After running the first command and hitting enter, it will take a while to download the Angular CLI packages from the npm repository and install it on your machine. You might get some errors but you should ignore them as soon as it has finished downloading the Angular cli packages. When it has finished installation you will see something like @angular/[email protected] Updated 2 packages in 8.2192 seconds at the bottom. Now we proceed to the second command (do not run it yet)
ng new YourAppName
Now you need to create your application. You should firstly change directory to your desired location you need the project files to be. You can read here how to change directory in command prompt. After changing directory, you can run the above command. Change “YourAppName” with your custom application name. This should generate a folder with your application files in your directory you have specified. Now close the command prompt
Final step is to actually bring up the development server that will run your build. Open again the command prompt as an administrator. Change directory inside your application root folder you have specified in the previous stepand hit enter. Now run the above command. Once the process has finished, you will be able to see your app on your browser by usually typing localhost:4200.
Remember that you should have the command prompt open for the development server to be running. Note that you need to repeat this step each time you turn off and on your PC. You can save the commands inside a .bat file so you can just run the file without entering again and again the same commands.
For example, you can create a .bat file with the following commands
Each time you run the .bat file it will open your “server” and your application will be accessible from your browser with this url http://localhost:4200
Done, you have successfully built your first Angularjs 6 application. I recommend to download the Visual studio code editor and select the open folder option to open up your project. Happy coding!