angularjs with node.js

How to setup Angular 6 with Node.js and create the first web app

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/cli@latest

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/cli@6.0.0 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

ng serve

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

cd C:\YourAppDirectory\AngularApp
ng serve

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!

 

Please follow and like us:
error

Leave a Reply

Your email address will not be published. Required fields are marked *