Angular is an open-source and front-end web app that helps carry out the development frameworks. It is often known to work on the Typescript with being led by Angular Team seen over Google, a community seen like corporations and individuals. At this discount, you need to cover how to install angular in windows along with ten different operating systems.
The guide helps in assuring that you can use Windows 10 Pro. Thus before you start, you need to create your account in which you will have the installation privileges that should remain with restricted access to the site mentioned above, as found in this document.
The Target Audience – The document deals with someone who installs the latest nodejs over window 10. The system requirements include Windows 10 OS, 4 GB RAM, with 10 GB free space.
In order to install the angular CLI you will require nodejs and npm. First of all, you need to check what goes in it and why you need it.
It would help if you had nodejs for dev tooling, including local webserver with some live reloading features along with the dev experience and you may not require nodejs for running and reacting in production.
Related Resource: How To Enable BitLocker In Windows 10 Home?
Understanding npm and the reason you need it angular development
Visit nodejs download page here
Click on Windows Installer to download the latest version of node installer.
In the previous step, you need to click on the downloaded node-vxx.xx.xx.msi ( for example node-v10.15.0.msi) to start the installation, which brings up the below screen. Please click Next
In the next step, you need to click next which will further be going to ask to accept the license, and please accept by clicking the checkbox and clicking Next.
Click on Install, which would require some elevated permissions that help give you the required rights as requested.
You need to open a command prompt and run the below command to test the node
With this, you can find output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is > v10.0.0)
Once you open a command prompt and run the below command to test npm
You should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is >5 )
Install Angular CLI
Setting up a productive angular development environment can help configure the tools like typescript, webpack and several other angular dependencies that are complex to configure for a newbie in the angular world. Several tools can help reduce this problem, out of which angular CLI is the easiest and finest tool with pre-built production-grade configurations. Angular CLI comes with a wide range of commands that help manage angular development, testing, and build processes.
We will install angular CLI using npm. On the terminal, run the install command shown below
npm install -g @angular/CLI
On the successful installation, you have the choice to check the output like above (note your angular/CLI version may be different by the time you run this install command)
To test the @angular/cli run ng version command
Congratulations, you have successfully installed @angular/cli
Running the first Hello World application
Create angular application using ng new command as shown below
This command helps create a new folder called hello-angular and then create all the files and setups the necessary libraries within this folder and makes the angular project ready to be executed without any additional configuration.
Once you create a project, it will change into the project directory and run the application using the ng serve command below.
The ng serve -o command starts the webpack development server, which performs all the build processes and opens a browser window and loads the application URL which runs by default. On successful execution, you should see the below output in the browser.
As discussed, we can find angular cli with some great tooling, one of the productive features is webpack hot reloading, which further help in deploying the change on life and saves the developer lot of time to redeploy and reload work.
Now, let us open the project and that further can help make some changes to see the experience of this great feature. We will go through the project structure to understand the importance of the files and folders created
Open the project that helped create in any earlier previous step in any JS editor, here you see the project is open in vscode editor. Over the left in the explorer section, you see file explorer, which can further showcase several folders and files created by ng new command. Let’s walk through them
e2e: this folder carries the end-to-end testing source and configuration code. If you wish to write end-to-end testing automation code, your efforts go into this folder
node_modules: This folder is managed by the package manager (npm) and contains all the project library dependencies. All the files in this folder should not be modified as the changes made are not guaranteed to be safe, as updating/installing any other library can overwrite the changes made.
Src: This is the folder that carries the development effort. As an Angular developer, you spent a lot of time in this folder creating modules, components, services, directives, etc. Several other files are outside the src folder and configuration files for angular CLI, editor, typescript, linting, and npm.