Angular 12 is the latest version in the Angular family. Angular applications are basically designed for Single Page Applications (SPAs), where all controls are required in single page architecture. Angular is an application-based design framework, which provides the Cross-Platform development environment for creating the most sophisticated SPAs. These SPAs are efficient enough for giving us a component to view the model environment, making it an MVC or MVVM application.
Here is an article on angular cli.
In this Article we are going to talk about how to install Angular 12 in macOS. We will be covering the following contents:
- The Pre-requisites for installation
- Download and Install Node.js
- The Download Site Address
- Instructions to Install Node.js
- Test Installation of Node.js
- Install Angular CLI
- How Node.js helps in installing Angular CLI
- Testing the installation of Angular CLI
- Create New Angular Application
- A Basic Hello-World Application in Angular
- Serve Angular Application
- Running the Hello-World Application
- Check the Output
- Check the Browser for the Output
Mentioned below are the pre-requisites for the installation of Angular in MAC OS.
The Pre-requisites are:
- MAC OS->10.10 plus installed in your PC
- At least 4 GB RAM
- A Hard drive memory of 10 GB free
- Administrator account for installing software in MAC OS or User account with privilege to install and unrestricted access to all related websites for Node.js and Angular.
Download and Install Node.js
So, before installing Angular 12, we need to install Node.js in the System.
Open the following site in the browser.
(Download the Node.js source code or a pre-built installer for your platform, and start developing today). We get the site as follows:
Download the LTS version of the software with the latest features.
This gives us three versions for different operating systems:
- Windows Installer (.msi) :
- 32-bit (node-v14.15.0-x86.msi)
- 64-bit (node-v14.15.0-x64.msi)
- Windows Binary (.zip)
- 32-bit (node-v14.15.0-x86.zip)
- 64-bit (node-v14.15.0-x64.zip)
- macOS Installer (.pkg)
- 64-bit (node-v14.15.0.pkg)
- macOS Binary (.tar.gz)
- 64-bit (node-v14.15.0-darwin-x64.tar.gz)
- Linux Binaries (x64)
- 64-bit (node-v14.15.0-linux-x64.tar.xz)
- Linux Binaries (ARM)
- ARMv7 (node-v14.15.0-linux-armv7l.tar.xz)
- ARMv8 (node-v14.15.0-linux-arm64.tar.xz)
- Source Code
- SmartOS Binaries
- 64-bit (node-v14.15.0-sunos-x64.tar.xz)
- Docker Image
- Official Node.js Docker Image
- Linux on Power LE Systems
- 64-bit (node-v14.15.0-linux-ppc64le.tar.xz)
- Linux on System z
- 64-bit (node-v14.15.0-linux-s390x.tar.xz)
- AIX on Power Systems
- 64-bit (node-v14.15.0-aix-ppc64.tar.gz)
Download the macOS Installer (.pkg) : 64-bit (node-v14.15.0.pkg). This is the latest version of Node installable package.
Install the .pkg in your operating system by clicking on the installer. Once clicked, the .pkg file opens the installer wizard. Click on continue to move to the next page.
Click on continue to continue to the next page with License Terms and Conditions.
You will be asked to accept the license, please do so by clicking on Agree, after reading the terms and conditions.
Click on Continue to move to the next page.
Once you have clicked on continue, you will get the install now page:
Click on Install, and enter the login credentials, the username and password, and then click on Install Software:
Once successfully installed, Node.js shows the following summary of the installation:
Click on Close to close the wizard.
Set the /usr/local/bin in your $PATH so that you can access the node and npm executable files. To verify the same open the terminal and type:
Test Installation of Node.js
Once the package is installed, open the Terminal and type the following command:
You will get the version of Node.js displayed.
You get the version of npm displayed.
Install Angular CLI
Angular CLI has a wide range of commands for Angular Applications. It helps us in managing, testing, and building Angular applications.
Once Node.js is installed in our system, we can use npm to install software globally on our system. Use –g option in the npm command to install the Angular CLI tool globally. Once done so it will be accessible to all users and applications on the mac OS system.
To install Angular CLI with the Node.js npm tool, use the following command:
$ sudo npm install -g @angular/cli
This command will install the latest Angular CLI version available at Angular site on your macOS system.
If you require other than the latest version of Angular, then use the following command in your mac OS:
For Angular 6:
$ npm install -g @angular/cli@6#Angular 6
For Angular 7:
$ npm install -g @angular/cli@7 #Angular 7
For Angular 8:
$ npm install -g @angular/cli@8 #Angular 8
For Angular 9:
$ npm install -g @angular/cli@9 #Angular 9
Testing the installation of Angular CLI
Once the installation is successful, Angular CLI will provide a command ng to be used for command line operations.
Type the following command to check the version of Angular CLI:
$ ng --version
$ ng version
And we should get the following output:
This completes your Angular installation. Now let us make a “Hello World” Application in Angular. Following section describes how to make a basic application in Angular.
Create New Angular Application
Create a folder for your application in the desired location on your system and open it on your favorite file browser.
A Basic Hello-World Application in Angular
Open a new terminal and move to your folder created for the application and type in the following command to create your app folder using ng create command as below.
$ ng create hello-world
$ ng new hello-world
For the Query “Would you like to add Angular Routing?” type Yes.
For the Query “Which style sheet format would you like to choose?” move your cursor to point to “CSS” and click enter.
Then it would take some time for further installation of the application folder, so we need to have patience in this respect.
At last, when the command is executed successfully, Angular creates a skeleton application under the folder. It also includes a bunch of files and other important necessities for the application.
Serve Angular Application
Once our Hello-World project is created change the current directory to project directory by cd command and run application using ng serve command as shown below:
$ cd hello-world
$ ng serve
We can leave the ng serve command running in the terminal as it will automatically refresh the browser each time we make and save changes in our Angular application. This makes Angular development quick and iterative.
Running the Hello-World Application
Once run, you can access your Angular application on localhost port 4200, which is the default host and port used by any Angular application. To get the output, type in your favorite browser, address bar the following:
If another application is running on that address, you can simply run the command.
$ ng serve--port
It will generate a different port for you to navigate to through the web browser.
Check the Output
Typically, the browser looks something like this:
Looking to enhance your coding skills? Discover the best certificate course for Python, the versatile programming language that powers everything from web development to data analysis. Unleash your potential with Python and unlock endless possibilities!
Through Angular 12 we can develop very dynamic applications.
However, sometimes we may require to undo the installation of Angular CLI.
We can uninstall angular cli through command terminal by using the npm tool. Run the following command in the terminal to Uninstall Angular:
$ npm uninstall -g @angular/cli